前端自动化构建工具搭建基于Ubuntu20.04：第六步Nginx服务器配置

jenkins构建示例

jenkins服务器IP假设为127.0.0.1

Nginx服务器IP假设为127.0.0.2

jenkins服务器与Nginx服务器实现免密登录

# 远程执行命令部署镜像
ssh -o StrictHostKeyChecking=no root@127.0.0.2 "docker pull 127.0.0.1:8082/fe/nginx-fe-$timestamp && \
docker stop jenkins-prod && \
docker rm jenkins-prod && \
docker run -p 8008:8008 -itd \
-v /home/nginx_prod:/etc/nginx \
--name jenkins-prod \
--restart always \
127.0.0.1:8082/fe/nginx-fe-$timestamp"

Nginx服务器配置信息处理

# 上面jenkins的shell命令中-v /home/nginx_prod:/etc/nginx
# 表示在nginx服务器的home文件下挂载了nginx_prod文件，映射到容器的/etc/nginx
# 可以使用docker copy将nginx容器内/etc文件夹下的nginx文件夹复制出来
# 将nginx容器下的/etc/nginx文件夹复制到本机的home目录下
docker cp  nginx容器ID:/etc/nginx/ /home/copy_test
docker cp  09719ff5d424:/etc/nginx/ /home/copy_test
# 在/home/copy_test文件夹下修改nginx.conf文件即可

nginx 目录展示

conf.d  fastcgi.conf  fastcgi.conf.default  fastcgi_params  fastcgi_params.default  koi-utf  koi-win  mime.types  mime.types.default  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;

    include /etc/nginx/conf.d/*.conf;

    client_max_body_size 10m;
    client_header_buffer_size 512k;
    large_client_header_buffers 4 512k;

    server {
        listen       8004; # 自行修改端口号
        server_name  127.0.0.1:8004; # 自行修改自己的IP 端口号
        root /usr/share/nginx/html; # 前端资源挂载的文件目录
        index index.html;
        location /api { # 接口代理设置
            proxy_pass http://127.0.0.1:8888/api; # 自行修改自己的IP 端口号
            proxy_redirect default;
            proxy_set_header Host $proxy_host;
            proxy_set_header X-real-ip $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location / {
            try_files $uri /index.html;
            add_header Cache-Control "no-cache";
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

前端项目根目录下配置Dockerfile文件

# jenkins部署使用的  需要修改 
FROM nginx:1.15-alpine
# 复制dist文件到neginx的/usr/share/nginx/html下
COPY dist /usr/share/nginx/html 
WORKDIR /usr/share/nginx/html

jenkins服务器 查看对应的前端资源

docker exec -it jenkins /bin/bash
# 进入jenkins的工作目录
cd /var/jenkins_home/worksapce
# ls 可查看到对应的前端资源目录  进入项目
cd fe-prod
ls
# 可查看到的资源 COPY dist /usr/share/nginx/html 就是将这里的dist文件复制到工作目录中
# WORKDIR /usr/share/nginx/html 与 nginx.conf 中root的挂载目录对应
Dockerfile  README.md  config  debug.log  dist  node_modules  package-lock.json  
package.json  postcss.config.js  public  src  tsconfig.json

进入nginx容器的指令

# 进入nginx容器
docker exec -it 容器名称 /bin/sh
docker exec -it jenkins-nginx /bin/sh