正文

今天來把昨天寫的頁面進行容器化的動作，首先撰寫Dockerfile

# static build
FROM node:14.17.6 As Builder
WORKDIR /homelab
COPY . .
RUN npm install
RUN npm run build

# using nginx hosting
FROM nginx:latest
COPY default.conf /etc/nginx/conf.d/
COPY --from=Builder /homelab/build /usr/share/nginx/html/

根據上述的內容可以看到，因為前端的頁面編譯出來的結果是屬於純靜態的檔案，所以我們會需要搭配另外的http server進行hosting。

常見的http server 有很多種 ex. apache、httpd、Nginx、haproxy，這邊使用Nginx做一個簡單的搭配設定

修改/etc/nginx/conf.d/default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

接著執行build image的指令

docker build -t homelab-nginx:dev .

一個簡單的打包就這麼完成了。

閒聊

這些reverse proxy其實都還有相當大的參數調整空間，可以用來效能調校，或是根據security規範進行特別的設定。而我這裡就只是讓他能跑起來而已啦XD