Day06，将昨日的静态页面打包

正文

今天来把昨天写的页面进行容器化的动作，首先撰写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