Nginx 部署 Vue 项目到 二级目录

时间：2025-02-07 11:44:06

需求：

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

如 /rm/，/auth/

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

1、

 = {
  publicPath: '/rm/',

2、路由下 

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

3、 

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

3、VUE 项目中的通用 Dockerfile

# 导入nginx镜像
FROM nginx:1.15.1-alpine

USER root

# 把当打包复制到
ADD ./dist /usr/share/nginx/html

# 使用自定义
COPY  /etc/nginx/

EXPOSE 80
# RUN /bin/bash -c 'echo init ok!!!'

4、VUE 项目中的通用 

 
# worker_processes : 定义了nginx对外提供web服务时的worder进程数，设置为“auto”将尝试自动检测它
worker_processes  auto; 
 
#pid         /usr/local/nginx/logs/;
#error_log   /usr/local/nginx/logs/ 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       ;
    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;
    # include /etc/nginx/sites-enabled/*;
 
    server {
        listen       80;
        # 接口服务的IP地址
        server_name  localhost;
        charset utf-8;
        access_log off;
        # 页面所在文件夹
        root   /usr/share/nginx/html;
        location / {
            index   ;
            try_files $uri $uri/ /;
        }
 
        error_page   500 502 503 504  /;
        location = / {
            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"
            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 
-rwxrwxrwx 1 kenny kenny  338 Jun 15  2021

1、Dockerfile

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

2、 配置

server {
      listen 443 ssl;
      charset utf-8;
      underscores_in_headers on;
      server_name ;

      ssl_certificate cert/;
      ssl_certificate_key cert/;
      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、启动脚本 

#!/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/:/etc/nginx/ \
-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

相关文章