前端部署：Docker+Nginx+Jenkins

用户084240651101
353 阅读2分钟

一、准备一台服务器

阿里云腾讯云都可

二、安装Docker环境

1.安装Docker的依赖库

yum install -y yum-utils device-mapper-persistent-data lvm2

2.添加Docker CE的软件源信息

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3.安装Docker CE

sudo yum install docker-ce

4.启动Docker服务
sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker //  启动docker
5.配置Docker镜像源
vim /etc/docker/daemon.json

添加registry-mirrors字段

{
    "registry-mirrors": [ 
        "https://docker.mirrors.ustc.edu.cn" 
    ]
}

三、安装Docker Compose

1.下载安装

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-uname -s-uname -m > /usr/local/bin/docker-compose

2.查看是否安装成功

docker-compose -v

Snipaste_2024-01-31_10-22-52.png

3.将/usr/local/bin/docker-compose文件设置为可执行文件

sudo chmod +x /usr/local/bin/docker-compose

四、安装Nginx和Jenkins

1.拉取镜像
docker pull nginx 
docker pull jenkins/jenkins:lts
拉取很慢可以查看是否配置了镜像源

docker info | grep -i "Registry Mirrors"

拉取完之后查看镜像 docker images

创建docker的相关目录，方便维护

mkdir /docker           
mkdir /docker/compose    
mkdir /docker/jenkins_home   
mkdir /docker/nginx      
mkdir /docker/nginx/conf 
mkdir /docker/html       
mkdir /docker/html/dev

给/docker/jenkins_home目录设置最高权限 chmod 777 /docker/jenkins_home

创建docker-compose.yml、nginx.conf配置文件

cd /docker/compose
touch docker-compose.yml

cd /docker/nginx/conf
touch nginx.conf

nginx.conf

# nginx.conf 例：
user  nginx;
worker_processes  1;
 
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
 
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
    access_log  /var/log/nginx/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    keepalive_timeout  65;
 
    gzip  on;

    #dev环境
    server {
            #监听的端口
        listen  80;
        server_name  localhost; //可以直接填写你的服务器公网ip
        #设置日志
#        access_log  logs/dev.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/dev/dist;
#               root  /home/html/dev/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }
    
#    include /etc/nginx/conf.d/*.conf;

}

docker-compose.yml

version: '3'

networks:
  frontend:
    external: true

services:                                      # 容器
  docker_jenkins:
    user: root                                 # root权限
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 使用的镜像
    container_name: jenkins                    # 容器名称
    environment:
      - TZ=Asia/Shanghai
      - "JENKINS_OPTS=--prefix=/jenkins_home" ## 自定义 jenkins 访问前缀（上下文context）


    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
      

    volumes:                                   # 卷挂载路径
      - /docker/jenkins_home/:/var/jenkins_home     # 挂载到容器内的jenkins_home目录
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  
  docker_nginx:                            # nginx环境
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /docker/html:/usr/share/nginx/html
      - /docker/nginx/logs:/var/log/nginx

五、启动环境

1.没有启动docker先启动docker

systemctl start docker

然后启动Jenkins、nginx docker-compose up -d

查看运行状态 docker ps -a

Snipaste_2024-01-31_10-26-40.png

六、验证nginx

在 /docker/html/dev/dist 目录下新建index.html，文件内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>welcome to Nginx</h1>
</body>
</html>

打开浏览器，输入服务器地址:80，看见页面显示welcome to Nginx说明Nginx配置没有问题。

七、验证Jenkins

浏览器输入 服务器地址:8080/jenkins_home,为什么要加jenkins_home,因为之前的docker-compose.yml中配置了访问前缀

页面提示输入密码，密码位置 cat /docker/jenkins_home/secrets/initialAdminPassword

选择推荐安装，等待安装完成，如果提示没有floders插件错误，可以百度解决

Jenkins自动化部署配置

左侧菜单栏中【Dashboard】——>【Manage Jenkins】——>【Plugins】——>【Available plugins】搜素，Publish Over SSH、NodeJS，安装后重启。

Snipaste_2024-01-31_10-29-00.png

Snipaste_2024-01-31_10-29-20.png

（1）Publish Over SSH配置远程服务器

Publish Over SSH用来连接远程服务器，接下来去设置连接远程服务器验证方式。

找到Publish Over SSH，点击新增，填写信息

Snipaste_2024-01-31_10-32-47.png

Name:jenkins_node

HostName: 服务器ip

Username: 服务器登录名称，我这里是root

RemoteDirectory: /

点击下面的高级

勾选Use password authentication,or use a different key

输入服务器密码

Snipaste_2024-01-31_10-51-38.png

（2）NodeJS配置

【Dashboard】——>【系统管理】——>【全局工具配置】——>【NodeJS 安装】

点击新增NodeJS

配置安装NodeJS的基本信息，自定义别名、选择安装版本，最后，先点击应用再保存。

别名：NodeJS18.18.1

版本： 写项目时用的node版本

Snipaste_2024-01-31_10-30-40.png

（3）创建job

回到Jenkins首页，右侧Create a job

输入项目名称，选择自由风格的软件项目，点击确定

Snipaste_2024-01-31_10-34-24.png

接下来需要配置项目的一些信息

Snipaste_2024-01-31_10-42-11.png

Configure

滑到Build Steps，因为提交服务器代码是没有node_moudle，所以我们需要执行脚本去安装依赖，Lets go！源码管理可以看到Build Steps模块，选择Execute NodeJS script

选择node版本，这个node版本是在上面我们已经配置过的，如果需要其他版本可通过上面操作新增NodeJs即可

Snipaste_2024-01-31_10-42-24.png

添加shell命令

在上图中选择增加构建步骤，在下拉框选中执行 shell

Snipaste_2024-01-31_10-42-46.png

#!/bin/bash
node -v 
npm -v 
npm config set registry https://registry.npmmirror.com
npm install
echo "依赖安装成功"
npm run build
echo "打包成功"
rm -rf dist.tar     # 每次构建删除已存在的dist压缩包
tar -zcvf dist.tar ./dist  #将dist文件压缩成dist.tar
echo $PATH

上面打包到了Jenkins中的workspace中，但是我们设置的项目环境路径跟这个不同，比如开发环境项目目录是/docker/html/dev/dist/，所以需要打包后，把dist文件内容推送到/docker/html/dev/dist/目录下。

然后点击增加构建步骤，选择Send files or execute commands over SSH，Send files or execute commands over SSH命令允许你在构建过程中通过SSH连接到远程服务器执行命令或发送文件。

Snipaste_2024-01-31_10-43-01.png

然后填写源文件、目标路径、执行脚本

Snipaste_2024-01-31_10-43-13.png

cd /docker/html/dev
rm  -rf   dist/
tar zxvf dist.tar
rm dist.tar

打包流程是：删除之前打包的tar压缩文件dist，把本次打包的dist文件压缩，然以压缩后的dist.tar为源文件，连接到远程服务器，放到/docker/html/dev目录下。然后删除dist目录，解压刚刚远道而来的dist.tar文件，之后删除压缩包。

  • Source files：准备发送的文件，该文件是相对于这个项目的workspace目录。例如要发送/docker/jenkins_home/workspace/gitlab_web/dist.tar到目标目录，则设置Source files为dist.tar
  • Remove prefix：目标文件前缀添加，例如要操作src下面的某个文件，就设置成src,本案例是根目录，无需设置
  • Remote directory：目标目录，本案例要复制到dev环境下的dist文件，/docker/html/dev
  • Exec command：最后执行的命令，可在这里进行解压，删除，复制等操作

最后再次执行立即构建。打开你的服务器地址:80。可以看到刚刚部署的项目啦。

Snipaste_2024-01-31_10-54-46.png

原文链接：blog.csdn.net/qq_38951259…

avatar
文章
阅读
粉丝