簡單用 Docker 部屬前端程式 nginx

2021-07-24 163 words One minute

Contents

簡單用 Docker 部屬前端程式 nginx

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

取得 nginx.conf 設定檔

1
2
3


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 上面。

1
2
3


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

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

1
2
3
4
5
6
7


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

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

Docker volume 掛載設定

1

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 設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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，然後自動化部屬。之後再說，顆顆。