Dockerfile + Nginx.conf文件记录（用于前端项目部署）

Dockerfile + Nginx.conf文件记录（用于前端项目部署）

---

本教程依据个人理解并经过实际验证为正确，特此记录下来，权当笔记。

注：基于linux操作系统(敏感信息都进行了处理)，默认服务器安装了docker以及nginx

此文结合另一篇博客共同构成前端服务部署的教程，特此记录。我使用了Docker进行发布，并使用了nginx进行静态资源处理，这里并不详细解析Dockerfile以及Nginx.conf的作用以及内部指令。

Dockerfile

FROM nginx:1.15.2-alpine
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

前端项目基于npm包管理，使用umi框架，ui库为Antd，且没有涉及到复杂的架构，所以Dockerfile十分简单，只需要nginx作为基础镜像，将打包后的dist资源文件导入到镜像中，并将nginx.conf配置文件放入到镜像中，nginx.conf下面有介绍，将容器的80端口暴露给宿主机。

nginx.conf

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass https://preview.pro.ant.design;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

从Dockerfile文件可以看到，我们将资源文件放在了/usr/share/nginx/html下，所以这里指定root为该路径，通过location中的try_files定位到资源， $uri $uri/ /index.html的解析可以参考https://www.cnblogs.com/boundless-sky/p/9459775.html