Nginx 部署 Vue 项目到 二级目录_vue nginx 二级目录

需求：

公司有很多个项目，但是域名是一个，现在需要在域名后面根据项目名进行访问，

如 xielong-dev.work/rm/，xielong-dev.work/auth/

一、Jenkins 构建了一个前端 Docker 服务

1、vue.config.js

module.exports = {
  publicPath: '/rm/',

2、路由下 index.js

const router = new VueRouter({
	base: '/rm/',
})

3、 axios.js

baseURL: process.env.NODE_ENV === 'development' ? '/rm/api/'

3、VUE 项目中的通用 Dockerfile

# 导入nginx镜像
FROM nginx:1.15.1-alpine
 
USER root
 
# 把当打包复制到
ADD ./dist /usr/share/nginx/html
 
# 使用自定义nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
 
EXPOSE 80
# RUN /bin/bash -c 'echo init ok!!!'

4、VUE 项目中的通用 nginx.conf

 
# worker_processes : 定义了nginx对外提供web服务时的worder进程数，设置为“auto”将尝试自动检测它
worker_processes  auto; 
 
#pid         /usr/local/nginx/logs/nginx.pid;
#error_log   /usr/local/nginx/logs/error.log crit;
 
# worker_rlimit_nofile : 更改worker进程的最大打开文件数限制
worker_rlimit_nofile 1000000;
 
events {
    # worker_connections : 设置可由一个worker进程同时打开的最大连接数
    worker_connections  65536;
    # multi_accept : nginx收到一个新连接通知后接受儘可能多的连接
    multi_accept on;
    # use : 设置用于复用客户端线程的轮询方法
    use epoll;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    # tcp_nopush : 告诉nginx在一个数据包里发送所有头文件，而不一个接一个的发送
    tcp_nopush     on;
    # 
    tcp_nodelay on;
    # server_tokens : 并不会让nginx执行的速度更快，但它可以关闭在错误页面中的nginx版本数字，这样对于安全性是有好处的。
    server_tokens off;
 
    # 给客户端分配keep-alive连结超时时间。伺服器将在这个超时时间过后关闭连结
    keepalive_timeout  10;
    # client_header_timeout 和client_body_timeout 设置请求头和请求体(各自)的超时时间。
    client_header_timeout 10;
    client_body_timeout 10;
    # reset_timeout_connection告诉nginx关闭不响应的客户端连接。这将会释放那个客户端所占有的内存空间。
    reset_timedout_connection on;
    # send_timeout 指定客户端的响应超时时间。
    # 这个设置不会用于整个转发器，而是在两次客户端读取操作之间。如果在这段时间内，客户端没有读取任何数据，nginx就会关闭连接。
    send_timeout 10;
 
    limit_conn_zone $binary_remote_addr zone=addr:5m;
    limit_conn addr 100;
 
    gzip  on;
    # gzip_disable为指定的客户端禁用gzip功能。我们设置成IE6或者更低版本以使我们的方案能够广泛兼容。
    gzip_disable "msie6";
    # gzip_static告诉nginx在压缩资源之前，先查找是否有预先gzip处理过的资源。
    gzip_static on;
    # gzip_proxied允许或者禁止压缩基于请求和响应的响应流。我们设置为any，意味著将会压缩所有的请求。
    gzip_proxied any;
    # gzip_min_length设置对数据启用压缩的最少字节数。
    # 如果一个请求小于1000字节，我们最好不要压缩它，因为压缩这些小的数据会降低处理此请求的所有进程的速度。
    gzip_min_length 1000;
    # gzip_comp_level设置数据的压缩等级。这个等级可以是1-9之间的任意数值，9是最慢但是压缩比最大的。
    # 设置为4，这是一个比较折中的设置。
    gzip_comp_level 4;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
 
    # open_file_cache打开缓存的同时也指定了缓存最大数目，以及缓存的时间。
    open_file_cache max=100000 inactive=20s;
    # open_file_cache_valid 在open_file_cache中指定检测正确信息的间隔时间。
    open_file_cache_valid 30s;
    # open_file_cache_min_uses 定义了open_file_cache中指令参数不活动时间期间裡最小的文件数。
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
 
    # include /etc/nginx/conf.d/*.conf;
    # include /etc/nginx/sites-enabled/*;
 
    server {
        listen       80;
        # 接口服务的IP地址
        server_name  localhost;
        charset utf-8;
        access_log off;
        # app-index.html页面所在文件夹
        root   /usr/share/nginx/html;
        location / {
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

5、Jenkins Pipeline 脚本

node {
    
    def DockerRepo='10.3.0.193:5001'
    def RemoteHost='devops@10.3.0.196'
    def ServiceName='服务名'
 
    stage('Preparation') {
    
		git branch: 'develop', credentialsId: 'Gitlab-Credential-SSH', url: 'git地址'
 
    }
	
    stage('Build') {
        
        nvm('version':'v12.14.1') {
            //sh "npm install -g nrm --registry=http://registry.npm.taobao.org/"
            sh "npm install"
            sh "npm run buildDev"
        }
 
        sh "docker build -t ${DockerRepo}/${ServiceName} ."
        sh "docker push ${DockerRepo}/${ServiceName}"
        sh "docker rmi ${DockerRepo}/${ServiceName}"
        
        sh "docker image prune -f"
    }
	
    stage('Remote SSH') {
        
        sh "ssh ${RemoteHost} docker rm -f ${ServiceName} || true"
        sh "ssh ${RemoteHost} docker rmi ${DockerRepo}/${ServiceName} || true"
        sh "ssh ${RemoteHost} docker run \
        --restart=always \
        --name=${ServiceName} \
        -v /etc/localtime:/etc/localtime \
        -p 7000:80 \
        -m 1G \
        -d ${DockerRepo}/${ServiceName}"
    }
 
}

二、Docker 部署 Nginx 服务

目录如下

ll /docker/nginx/
 
drwxrwxrwx 2 root  root  4096 Nov 26  2021 cert
-rwxrwxrwx 1 kenny kenny  243 Jun 28 18:51 Dockerfile
-rwxrwxrwx 1 kenny kenny 8058 Nov  3 10:59 nginx.conf
-rwxrwxrwx 1 kenny kenny  338 Jun 15  2021 start.sh

1、Dockerfile

FROM nginx:1.16-alpine
ENTRYPOINT nginx -g "daemon off;"

2、Nginx.conf 配置

server {
      listen 443 ssl;
      charset utf-8;
      underscores_in_headers on;
      server_name xielong-dev.work;
 
      ssl_certificate cert/xielong-dev.work.pem;
      ssl_certificate_key cert/xielong-dev.work.key;
      ssl_session_timeout 5m;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
      ssl_prefer_server_ciphers on;
 
      location /rm/ {
        proxy_set_header Host $host;
        proxy_pass http://10.3.0.196:7000/;
      }
 
      location /rm/api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' '*';
        add_header 'Access-Control-Allow-Headers' '*';
        client_max_body_size 35M;
        proxy_pass http://10.3.0.221:8600/api/;
      }
}

3、启动脚本 start.sh

#!/bin/bash
 
DOCKERNAME="nginx"
 
docker rm -f $DOCKERNAME || true
docker build -t $DOCKERNAME .
 
docker run --name $DOCKERNAME \
-p 7222:7222 \
-p 443:443 \
-v /docker/$DOCKERNAME/nginx.conf:/etc/nginx/nginx.conf \
-v /etc/localtime:/etc/localtime \
-v /docker/$DOCKERNAME/cert:/etc/nginx/cert \
-m 1G \
-d $DOCKERNAME \
--restart=always

三、服务器上面查看

883b268e1c0f        nginx                                     "/bin/sh -c 'nginx -…"   About an hour ago   Up About an hour    0.0.0.0:443->443/tcp, 80/tcp, 0.0.0.0:7222->7222/tcp             nginx
167ae70926a2        10.3.0.193:5001/rm-frontend-local:0.0.1   "nginx -g 'daemon of…"   23 hours ago        Up 23 hours         0.0.0.0:7000->80/tcp                                             rm-frontend-local