Docker通过Nginx容器代理部署Vue项目

柔情只为你懂 2024-03-24 16:57 10阅读 0赞

## 一、打包构建dist ##

在vue.config.js 添加入口等配置：

pages: {
        index: {
          // 入口
          entry: 'src/main.js'
        }
      },
    lintOnSave: false,
    publicPath: './'

![69b831c4b1a64776a2a159312dbdede0.png][]

在package.json文件中编写build构建：![a0607c0c4a954a6d9cd1c8c2384b86db.png][]

然后运行:

npm run build

在项目根目录下就有构建好的dist包，双击其中的index.html文件是可以正常运行的。若不能运行可以参考其他文章重新配置打包。

## 二、创建挂载目录文件和配置文件 ##

### 1、创建挂载目录 ###

mkdir -p /znzm-dlaq/www /znzm-dlaq/logs /znzm-dlaq/conf

![78af006ba5e84b17898ff2bcbc5d053f.png][]

### 2、将dist文件夹上传到www目录下 ###

![0e3b4dcdee2d429e85ca6291760dde94.png][]

### 3、创建nginx.conf配置文件 ###

vim conf/nginx.conf

user  root;
    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;
     
        server {
    		listen       80;
    		server_name  localhost;
    		charset utf-8;
     
    		location /dist/ {
    			alias  /znzm-dlaq/www/dist;#ok
    			autoindex on; ##显示索引
    			autoindex_exact_size on; ##显示大小
    			autoindex_localtime on; ##显示时间
    		}
    		error_page  404              /404.html;
    	}
    }

![fb10c579991a421f8ca40c3f92583b7b.png][]

## 三、运行Nginx容器 ##

docker run -d -p 8081:80 --name nginx1 -v /znzm-dlaq/www:/usr/share/nginx/html -v /znzm-dlaq/logs:/var/log/nginx  nginx

![8db89cbacab146f7a4d6e5096e969c6e.png][]

在端口已经开启的情况下，可以通过ip:端口/dist/index.html访问到Vue的页面

![fdf07184cf8c434194ccec1aacf17fcc.png][]

!!! 如果是出现：**403 Forbidden nginx/1.23.4**的情况下，可能是nginx没有操作权限，需要改一下/znzm-dlaq的权限，然后重启nginx1容器：

chmod -R 777 /znzm-dlaq/
    docker restart nginx1

![cb669f327fb34b32a9d098d1fd8e1159.png][]

还是报错**403 Forbidden nginx/1.23.4**可参考：[https://blog.csdn.net/weixin\_44138647/article/details/103589130][https_blog.csdn.net_weixin_44138647_article_details_103589130]

[69b831c4b1a64776a2a159312dbdede0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/55a9f336fbb84033bd42d4db2cc51de7.png
[a0607c0c4a954a6d9cd1c8c2384b86db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/adcaea6728c34d489038380792c3047d.png
[78af006ba5e84b17898ff2bcbc5d053f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6c20c3809da24873afa38ae18cf32b05.png
[0e3b4dcdee2d429e85ca6291760dde94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d5cd40b640284437a0d6557ef923b225.png
[fb10c579991a421f8ca40c3f92583b7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7bf64063f03a48008e6c7e5d6e8072b5.png
[8db89cbacab146f7a4d6e5096e969c6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1e98314d595d4774adab70b3bab9f399.png
[fdf07184cf8c434194ccec1aacf17fcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a681396396374f12b7e97a04f175ecf8.png
[cb669f327fb34b32a9d098d1fd8e1159.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c674e95ba8d844f7ba71e4bc8d9d0b93.png
[https_blog.csdn.net_weixin_44138647_article_details_103589130]: https://blog.csdn.net/weixin_44138647/article/details/103589130