vue部署docker

vue部署docker

前言

课程项目用到的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