Docker Nginx容器部署vue项目

Docker Nginx容器部署vue项目

1. 前提

Docker服务已部署

2. 下载nginx镜像

首先查看有没有nginx镜像

docker images

没有的情况下再进行下载

docker pull nginx

3. 编写nginx.conf配置文件

在/home/mr-web/conf目录下创建nginx.conf配置文件

#user  nobody;
worker_processes  1;
events {worker_connections  1024;
}
http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80;server_name  localhost;location / {# 这里重点关注以下：这里是容器内部地址root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html;error_page 404 index.html;}#和上面vue文件对应上，访问后端都加mr-api#这里看情况，有的vue项目访问后端接口不需要代理location /mr-api {#rewrite ^/rest/(.*) /$1 break;proxy_pass http://192.168.1.113:8081;#proxy_cookie_path / /rest;proxy_redirect off;#client_max_body_size 500m;#proxy_set_header X-Real-IP $remote_addr;#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

4. 编写构建命令

docker run \
-d -p 8080:80 \
--name mr-web \
-v /home/mr-web/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/mr-web/logs:/var/log/nginx \
-v /home/mr-web/dist:/usr/share/nginx/html \
nginx:latest

编写好运行，vue应用容器就创建好了

5. vue项目上传

将打包好的vue项目dist上传至/home/mr-web/dist，整个dist上传的需要打到/home/mr-web目录就可以了