(3) 静态前端网站容器化 - 容器篇

建议点击 查看原文 查看最新内容。

原文链接: https://typonotes.com/posts/2024/12/16/static-website-container-image/

相关连接

  1. (1) 静态前端网站容器化 - 理论篇
  2. (2) Vue3 / React 静态网站项目容器化 - 实战案例

对于容器的选择， 其实没什么多数说的， 普通的 nginx 就可以了， 或者类似 caddy 这些都行。

如果由于某些权限问题， 选择了 nginxinc/nginx-unprivileged - docker-hub 则需要注意，

  1. /usr/share/nginx/html 权限归于 root
  2. 启动用户是 nginx, 使用 sed 修改 index.html 时无法在文件夹中产生临时文件 index.html.swp

解决方式 至少有以下两种

  1. 在 Dockerfile 使用 root 修改 /usr/share/nginx/html 的属主。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

FROM nginxinc/nginx-unprivileged:1.25.4 as runner
EXPOSE 8080

## modify the permission of the /usr/share/nginx/html, so that we can inject __CONFIG__ into the index.html
USER root
RUN chown -R nginx:nginx /usr/share/nginx/html
COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/docker-entrypoint.sh /docker-entrypoint.sh

USER nginx

ENTRYPOINT [ "/docker-entrypoint.sh" ]
CMD ["nginx", "-g", "daemon off;"]
  1. 使用 重定向 方式覆盖 index.html 的内容。
1

envsubst < index.html.tmpl > index.html