课程项目用到的vue部署docker方法，比较傻瓜，记录一下。
所需软件及版本
vue2.X
1.登录服务器
2.下载nginx镜像
docker pull nginx 3.创建/usr/share/nginx/html文件夹
4.为/usr/share/nginx/html文件夹打开文件写入权限
sudo chmod 777 html 5.打包前端文件，将打包后的dist文件夹上传至服务器
npm run build scp -r [本地路径] [uesrname]@[ip]:[/usr/share/nginx/html] 6.进入/usr/share/nginx/html,建Dockerfile文件并写入
vim Dockerfile FROM nginx:latest COPY dist/ /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf 7.同一目录新建nginx.conf文件并写入
sudo vim nginx.conf worker_processes auto; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; client_max_body_size 20m; server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; #配置Vue项目根路径 index index.html index.html; #配置首页 try_files $uri $uri/ /index.html; #防止刷新报404 } #error_page 404 /404.html; #location = /40x.html { #} error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } 8.在/user/share/nginx/html目录下建立镜像
docker build -t [image_name] . 不要忘记“.”
9.运行镜像
docker run --name [name] -d -p [port1]:[port2] [image_name] - port1是可访问的端口，port2是映射的宿主机端口
- image_name是建立的镜像的名字
10.查看容器状态
docker ps 11.访问前端页面
http://ip:port 原文链接：https://blog.csdn.net/qq_43637359/article/details/123720423?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816781683913367%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816781683913367&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-123720423-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/7465
