docker部署前端项目（包含前端跨域、websocket）

基本参数（请自行替换）

服务器ip：192.168.0.1
用户：node
服务器内路径：~/nginx
Docker内路径：/usr/share/nginx/html/

项目打包

npm run build

上传dist文件夹、Dockerfile、nginx配置

Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

nginx配置 default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    root   /usr/share/nginx/html;
    index  index.html index.htm;

    location /{
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

	# nginx跨域配置
    location /api{
        proxy_pass http://192.168.0.141:8088/;
        proxy_pass_request_headers  on;
        rewrite "^/api/(.*)$" /$1 break;

		# 下面是websocket需要的配置
        proxy_http_version 1.1;
        #这里必须使用http 1.1
        #下面两个必须设置，请求头设置为ws请求方式
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

文件上传(使用scp命令)

scp -r ./dist node@192.168.0.1:~/nginx
scp  .\Dockerfile node@192.168.0.1:~/nginx
scp  .\default.conf node@192.168.0.1:~/nginx/nginx 

使用shell快速部署或重新部署

使用cae-app-react作为镜像名
使用cae-app作为容器名
如果不一样，请自行修改命令

在~/nginx下运行

docker stop $(docker ps -a|grep cae-app-react|awk '{print $1}')
docker rm $(docker ps -a|grep cae-app-react|awk '{print $1}')
docker rmi cae-app-react
# 上面是删除之前的容器与镜像
docker build -t cae-app-react .
docker run -p 80:80 -d --name cae-app cae-app-react