簡單用 Docker 部屬前端程式 nginx

之前這篇Vue Router 4 學習筆記 | 程式狂想筆記有記錄到要怎麼使用 nginx，今天就簡單實作看看。

取得 nginx.conf 設定檔

可參考:Nginx - Official Image | Docker Hub

docker run --name tmp-nginx-container -d nginx
docker cp tmp-nginx-container:/etc/nginx/nginx.conf /host/path/nginx.conf
docker rm -f tmp-nginx-container

我以前有有寫過抓出 Docker 裡面檔案設定檔出來 | 程式狂想筆記，但久久沒用就忘記差不多…

前端設定

加在 nginx.conf 上面。

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

要補上 server ，要放在 http 裡面。

server{
  listen 80;
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
}

參考:不同的历史模式 | Vue Router

Docker volume 掛載設定

docker run --rm -v $(pwd)/dist:/usr/share/nginx/html:ro -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf:ro -p 3355:80 nginx

可以跑的話再設定

nginx 基礎設定教學

設定 docker-compose

加上 traefik 設定

version: "2"

services:
  strTemplateTest:
    image: nginx
    volumes:
        - ./dist/:/usr/share/nginx/html
        - ./nginx.conf:/etc/nginx/nginx.conf
        - /etc/localtime:/etc/localtime:ro
    networks:
        - traefik_network
    restart: always

    labels:
      - "traefik.http.routers.strTemplateTest.rule=Host(`strTemplateTest.xxxx.org`)"
      - "traefik.http.routers.strTemplateTest.tls=true"
networks:
  traefik_network:
    external: true

之後…

之後研究 Drone CI 會研究怎麼 build dockerfile，然後自動化部屬。之後再說，顆顆。