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