使用docker的nginx部署前端

构建生产环境(默认) npm run build

# 构建测试环境
npm run build --qa
# 构建验收环境
npm run build --uat
# 构建生产环境
npm run build --prod

方法一：

1、启动docker的nginx容器并挂载本地卷

 # -v [本地路径]:[容器路径]
 docker run --name nginx_dev -p 8080:80 -d -v /home/html/dist:/usr/share/nginx/html nginx

方法二：

1、启动docker的nginx容器

 docker run --name nginx_dev -p 8080:80 -d nginx

2、准备nginx的配置文件（nginx.conf）

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 / {
			# value为自己的项目路径
            root   /home/dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

3、替换nginx容器内部的配置文件

# docker cp [nginx配置文件] [容器id]:[容器内部文件夹]
docker cp nginx.conf [容器id]:/etc/nginx/

4、拷贝项目目录到nginx容器指定目录

# docker cp [前端打包好的文件夹] [容器id]:[容器内部文件夹]
docker cp dist [容器id]:/home

5、重载nginx容器

docker exec [容器名称|容器ID] nginx -s reload

完成，访问测试！！！