nginx

References

• 🎬 程序員魚皮 - 光速入門 Nginx

Vue + Docker + nginx

1. 在專案根目錄先配置 nginx.conf

   ​​​​server {
   ​​​​    # container 暴露出的是哪個 port
   ​​​​    listen       7777;
   ​​​​    server_name  localhost;
   
   ​​​​    client_max_body_size        100m;
   ​​​​    client_body_buffer_size     128k;
   ​​​​    proxy_connect_timeout       5;
   ​​​​    proxy_send_timeout          1800;
   ​​​​    proxy_read_timeout          1800;
   ​​​​    proxy_buffer_size           4k;
   ​​​​    proxy_buffers               4 32k;
   ​​​​    proxy_busy_buffers_size     64k;
   ​​​​    proxy_temp_file_write_size  64k;
   ​​​​    auth_basic "status";
   ​​​​    # 開啟 gzip
   ​​​​    gzip  on;
   ​​​​    # 低於 1kb 的資源不壓縮
   ​​​​    gzip_min_length 1k;
   ​​​​    # 壓縮級別 1-9，越大壓縮率越高，同時消耗 CPU 資源也越多，建議設置在 5 左右
   ​​​​    gzip_comp_level 5;
   ​​​​    # 需要壓縮哪些 response 類型的資源，用空格隔開。不建議壓縮圖片
   ​​​​    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
   ​​​​    # 配置禁用 gzip 條件，支持正規表達式。此處表示 IE6 及以下不啟用 gzip
   ​​​​    gzip_disable "MSIE [1-6]\.";
   ​​​​    # 是否添加 "Vary: Accept-Encoding" response header
   ​​​​    gzip_vary on;
   
   ​​​​    # location / 是指當從外部訪問這個服務的時候，它需要帶什麼路徑
   ​​​​    # 若希望訪問的網址是 localhost:7777/hello 就寫成 location /hello
   ​​​​    # try_file 為配置路由
   ​​​​    location / {
   ​​​​        root /usr/share/nginx/html;
   ​​​​        index index.html index.htm;
   ​​​​        try_files $uri $uri/ /index.html;
   ​​​​    }
   
   ​​​​    error_page   500 502 503 504  /50x.html;
   ​​​​    location = /50x.html {
   ​​​​        root /usr/share/nginx/html;
   ​​​​    }
   ​​​​}
   

2. 在專案根目錄寫 Dockerfile

   🚨注意：dist 打包目錄和 nginx.conf 設置所放置的位置

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

3. Docker：創建 image

   ​​​​docker build -t vue_project_20250227 .
   

4. Docker：創建 container 並啟動

   ​​​​docker run -it -d -p 7777:7777 --name vue_project vue_project_20250227