docker+nginx+jenkins部署前端应用 docker+nginx+jenkins部署前端应用

准备工具

下载 -> 安装 -> 部署 jenkins
安装docker简介
linux基本操作命令 (cp、mv、apt-get、yum)

一、下载安装docker

下载安装docker https://www.docker.com/get-started
安装portainer,管理docker容器的工具

docker volume create portainer_data docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer

访问本地9000端口,手动创建nginx和jenkins容器

二、配置ssh (SSH是一种网络协议，用于计算机之间的加密登录)

安装 openssh-server

apt-get update //更新apt-get资源 apt-get install openssh-server //安装ssh服务

ssh-keygen

jenkins@jenkins:~/.ssh$ ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/var/jenkins_home/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /var/jenkins_home/.ssh/id_rsa. Your public key has been saved in /var/jenkins_home/.ssh/id_rsa.pub. The key fingerprint is: SHA256:1/Zkmg3ROmqXyV9xv3yLuKB1sPA9pArrAfvO1JfMzO8 jenkins@jenkins The key's randomart image is: +---[RSA 2048]----+ || |.| |. .| |. o| |..S...* o..| |o . B.B+ %+| |. + . &o+B o o| |+ + =.+.o.o.o| |o* o.E...+o| +----[SHA256]-----+

拷贝公钥到目标容器

cd ~/.ssh/cat id_rsa.pub >> authorized_keys // 创建授权文件chmod 600 authorized_keys //修改权限 chmod 700 ~/.ssh/ //修改权限vim /etc/ssh/sshd_config// 编辑ssh配置文件RSAAuthentication yes//加密授权 PubkeyAuthentication yes// 公钥授权 PermitRootLogin yes//root用户能通过SSH登录esc -> shift+: -> (wq (保存退出) q (退出不保存)) service ssh restart // 重启ssh服务docker container ls //查看容器列表 ? sword@sword  ~/Desktopdocker container ls CONTAINER IDIMAGECOMMANDCREATEDSTATUSPORTSNAMES b0cd5ce116a7jenkins/jenkins:lts"/sbin/tini -- /us..."10 hours agoUp 10 hours0.0.0.0:50000->50000/tcp, 0.0.0.0:9999->8080/tcpjenkins f615314f4fccnginx:latest"nginx -g 'daemon ..."10 hours agoUp 10 hours0.0.0.0:8899->80/tcp, 0.0.0.0:8443->443/tcpnginx 4f99cd6cdde9portainer/portainer"/portainer"11 hours agoUp 10 hours0.0.0.0:9000->9000/tcpportainer// 进入jenkins容器 // mac docker exec -it b0cd5ce116a7 bash // win docker exec -it b0cd5ce116a7 powershell// 查看公钥 jenkins@jenkins:/$ cat ~/.ssh/id_rsa.pub ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCS8KJ5GMBPXrpz98HZCXwFMy2rmprd/HumNFHNDoBSE94QvBYIBRpWjNC07yJwnSqS4kj+4VoVSViUArwX+yMutVvLwzNwWoaZft7+2YYryi5fUNwU5QmM+ang0nCNI53FECvGiqSkxPXeSAIU+OWyl2z1JjFzlI1J/KobQZCoSIMqd7PZHbVv5KoB6MPYPxyVHnSjcxDTVq2LKr8kSpXuJo5cfais614jk1KeDe+vu6Ap7F2p18cYVZJChbNwz66W7YvS/MGPBu6+qceuCZNokIPtKkV7u//9Ign+OVsExA6Q+5RUbgTTgBdGnk5s9RrhMorGkVyebGm1sL8pnWHx jenkins@jenkins// 复制公钥到nginx容器上 // 进入jenkins容器 // mac docker exec -it b0cd5ce116a7 bash // win docker exec -it b0cd5ce116a7 powershell // 编辑authorized_keys文件 vim ~/.ssh/authorized_keys // 查看授权公钥 root@nginx:~# cat ~/.ssh/authorized_keys ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQChXbjgOoOH1r+L5vHXd1hzlZSGhyEj4h1LBPR7NUCA0gX/eiVIIwW5oZgY9Ow7vuVTxB5m93X/phVEYctFgDp6QpLNL/Ege2TBRR2s2VvNYVUTLTOiGgRKEvUEpZCoGoN3b+zjYkz9tGsp1HJ5XJUCQo8QjcIlH+W4iHKzkH1v9KUgstx6rr3fbpKkqRYh5cGDqQ0t5aXycJSQYukMezvr4qk+Q88O0ITOxYfv3oC4F6jciNzusvF3CLqZtlB4w7OvexeQz3eDrAILq5iW+neF1SLczrPpC2aSjl1RG5fPJ8s4ZLkdMo222IzB4Uugne/dm6U2HWmyLbg5uQzzEeo3 root@nginx ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCS8KJ5GMBPXrpz98HZCXwFMy2rmprd/HumNFHNDoBSE94QvBYIBRpWjNC07yJwnSqS4kj+4VoVSViUArwX+yMutVvLwzNwWoaZft7+2YYryi5fUNwU5QmM+ang0nCNI53FECvGiqSkxPXeSAIU+OWyl2z1JjFzlI1J/KobQZCoSIMqd7PZHbVv5KoB6MPYPxyVHnSjcxDTVq2LKr8kSpXuJo5cfais614jk1KeDe+vu6Ap7F2p18cYVZJChbNwz66W7YvS/MGPBu6+qceuCZNokIPtKkV7u//9Ign+OVsExA6Q+5RUbgTTgBdGnk5s9RrhMorGkVyebGm1sL8pnWHx jenkins@jenkins

三、配置jenkins

查看jenkins映射的端口号

文章图片
image.png
【docker+nginx+jenkins部署前端应用】访问 localhost:9999
jenkins配置nodejs

文章图片
image.png

文章图片
image.png

文章图片
image.png

文章图片
image.png

文章图片
image.png
jenkins配置git仓库

文章图片
image.png

文章图片
image.png

文章图片
image.png

文章图片
image.png

文章图片
image.png

文章图片
image.png
使用 jenkins shell

文章图片
image.png

文章图片
image.png

rm -rf node_modules && npm i npm run build ssh -t root@172.17.0.3 "mkdir /usr/share/nginx/html/demo"// -t 不显示终端，只显示连接成功信息 scp -r ./build/* root@172.17.0.3:/usr/share/nginx/html/demo

四、配置nginx 找到nginx容器的id

文章图片
image.png 注：nginx有默认的配置文件在 /etc/nginx/conf.d/default.conf ,这里要删掉，用我们自己的/etc/nginx/nginx.conf

rm/etc/nginx/conf.d/default.conf vim /etc/nginx/nginx.conf// 在server结构中新增 server { listen 80; //监听的端口号// 匹配访问路径 location / { root/usr/share/nginx/html/demo; // 项目的路径 try_files $uri /index.html /index.htm /index; // 要访问的文件名 } }****** 编辑完成后执行 nginx -s reload //重新载入配置