从零开始网页制作教程,微博seo排名优化,网站用什么主机,2024年的新闻Docker Nginx容器部署vue项目 文章目录 Docker Nginx容器部署vue项目1. 前提2. 下载nginx镜像3. 编写nginx.conf配置文件4. 编写构建命令5. vue项目上传 1. 前提
Docker服务已部署
2. 下载nginx镜像
首先查看有没有nginx镜像
docker images没有的情况下再进行下载
docker …Docker Nginx容器部署vue项目 文章目录 Docker Nginx容器部署vue项目1. 前提2. 下载nginx镜像3. 编写nginx.conf配置文件4. 编写构建命令5. vue项目上传 1. 前提
Docker服务已部署
2. 下载nginx镜像
首先查看有没有nginx镜像
docker images没有的情况下再进行下载
docker pull nginx3. 编写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目录就可以了
