Docker部署前端项目（vue/react）

Dockerfile

项目根目录创建Dockerfile

FROM nginx

COPY build/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

nginx.conf

项目根目录创建nginx.conf,构建镜像的时候，会把这个配置替换为镜像里的nginx默认配置.
这里可以自定义容器内部的nginx配置.

server {
    listen       80;
    server_name  localhost;

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

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html;
    }

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

}

注意

如果nginx配置出错问题不能起到，可以进入窗口内部将/etc/nginx/conf.d/default.conf配置copy到主机修改后，然后再命名为nginx.conf放在项目根目录.