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  ~/Desktop  docker container ls
CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                                              NAMES
b0cd5ce116a7        jenkins/jenkins:lts   "/sbin/tini -- /us..."   10 hours ago        Up 10 hours         0.0.0.0:50000->50000/tcp, 0.0.0.0:9999->8080/tcp   jenkins
f615314f4fcc        nginx:latest          "nginx -g 'daemon ..."   10 hours ago        Up 10 hours         0.0.0.0:8899->80/tcp, 0.0.0.0:8443->443/tcp        nginx
4f99cd6cdde9        portainer/portainer   "/portainer"             11 hours ago        Up 10 hours         0.0.0.0:9000->9000/tcp                             portainer

// 进入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
访问 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 //重新载入配置