docker部署vue应用

1. 网上拉取nginx镜像

docker pull nginx

2. 将vue项目打包

vue-cli-service build

 

 3. 将项目文件放到服务器

#创建项目存放文件
mkdir works
# 将dist文件夹放入到/works文件夹下面

4. 编辑nginx.conf

vim /works/nginx.conf

server {
	listen      8080;
	server_name  192.168.91.130;
	# 请求体的大小限制
	client_max_body_size 50m;
	# 日志文件存放地址
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
	
	# 代理前端项目文件
	location / {
	       root   /usr/share/nginx/html;
	       index  index.html index.htm;
	       try_files $uri $uri/ /index.html;
    }
	
	# 代理后端服务地址 192.168.1.1:9090为后端服务地址
    location /api/ {
        proxy_pass http://192.168.1.1:9090/;
    }
    # 代理后端websocket服务地址
	location ^~ /wpi/ {
	   proxy_pass http://192.168.1.1:9090/;
	   proxy_http_version 1.1;
	   proxy_set_header Upgrade $http_upgrade;
	   proxy_set_header Connection "upgrade";
	}  
}

5. 编写Dockerfile 

vim /works/Dockerfile

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx
# 将dist文件拷贝到容器内的 /usr/share/nginx/html
COPY dist/ /usr/share/nginx/html
# 将nginx.conf文件拷贝到容器中nginx的默认配置文件存放目录下
COPY nginx.conf /etc/nginx/conf.d/default.conf 

6.生成镜像

# 在/works目录下执行命令
# vue 为镜像的名称
docker build -t vue .

7.启动容器

docker run -d -p 8080:8080 --name vue vue 

8.浏览器访问