greenaj/node-frontend

支持的标签及对应Dockerfile链接

• https://github.com/greenaj/node-frontend/blob/master/Dockerfile

Node.js前端开发与Chrome Headless测试

此Docker镜像从https://github.com/tiangolo/node-frontend%E5%88%86%E5%8F%89%E8%80%8C%E6%9D%A5%EF%BC%8C%E6%9C%89%E5%85%B3%E5%8E%9F%E4%BD%9C%E8%80%85%E7%9A%84%E6%9B%B4%E5%A4%9A%E4%BF%A1%E6%81%AF%E8%AF%B7%E5%8F%82%E8%A7%81https://github.com/tiangolo%E3%80%82

该Docker镜像简化了创建完整Node.js环境的过程，用于前端开发并支持多阶段构建。

本项目与原项目相比的主要区别：

• 未安装Puppeteer，仅包含其依赖项。需在Node项目中自行安装Puppeteer。
• Node.js版本已更新，以跟上最新稳定（LTS）版本的发布。
• default.conf文件已更新，以匹配最新稳定版NGINX容器的发布，详见https://hub.docker.com/_/nginx%E3%80%82

本项目与原项目的主要相似点：

• 包含适用于前端应用的默认Nginx配置，在多阶段Docker构建中可将其复制到Nginx"阶段"。此版本保留原文件名default.conf，而原项目使用nginx.conf作为文件名。

原作者文章

Angular in Docker with Nginx, supporting configurations / environments, built with multi-stage Docker builds and testing with Chrome Headless

Medium链接，以及https://github.com/tiangolo/medium-posts/tree/master/angular-in-docker

如何使用

以下大部分文档来自原项目，由原作者创建：

前置步骤

• 创建基于Node.js的前端代码（Angular、React、Vue.js等）。

• 创建.dockerignore文件（类似于.gitignore），并包含：

node_modules

...以避免将node_modules复制到Docker中，避免不必要的性能损耗。

• 如果希望将测试集成到Docker镜像构建过程中（通过Puppeteer使用Chrome Headless），请在本地安装Puppeteer，以便本地测试并将其添加到package.json的开发依赖中：

bash
npm install --save-dev puppeteer

Dockerfile

• 创建基于此镜像的Dockerfile，并将阶段命名为build-stage用于构建：

Dockerfile
# 阶段0，"build-stage"，基于Node.js，用于构建和编译前端
FROM greenaj/node-frontend:12 as build-stage

...

• 复制package.json及可能的package-lock.json：

Dockerfile
...

WORKDIR /app

COPY package*.json /app/

...

...仅复制package*.json文件，以便一次性安装所有依赖，并让Docker在后续构建中使用缓存，而非在源代码每次更改后重新安装所有依赖。

• 在Dockerfile中安装npm包：

Dockerfile
...

RUN npm install

...

• 复制源代码（TypeScript文件、.vue文件或React的JSX文件等），将在Docker内部编译：

Dockerfile
...

COPY ./ /app/

...

• 如果已使用Puppeteer集成Chrome Headless测试，此镜像包含Puppeteer的所有依赖项，因此在安装依赖（包括puppeteer本身）后，可直接运行测试。例如：

Dockerfile
...

RUN npm run test -- --browsers ChromeHeadlessNoSandbox --watch=false

...

...如果测试未通过，将抛出错误并停止构建，确保不会将"损坏"的前端Docker镜像部署到生产环境。

• 如果需要传递构建时参数（例如Angular的--configuration），创建默认ARG用于构建时：

Dockerfile
...

ARG configuration=production

...

• 使用npm正常构建前端应用：

Dockerfile
...

RUN npm run build

...

• 如果需要传递构建时参数（例如Angular），使用先前声明的ARG修改上述指令，例如：

Dockerfile
...

RUN npm run build -- --output-path=./dist/out --configuration $configuration

...

...之后，前端应用代码将在Docker容器中完成构建。但如果要提供前端静态文件，可使用高性能服务器如Nginx，并获得不含所有Node.js代码的精简Docker镜像。

• 创建基于Nginx的新"阶段"（如同在同一文件中的另一个Docker镜像）：

Dockerfile
...

# 阶段1，基于Nginx，仅包含已编译的应用，准备通过Nginx投入生产
# 可根据需要调整NGINX的版本标签
FROM nginx:1.16

...

• 使用上述创建的build-stage阶段，将其中生成的文件复制到Nginx使用的目录：

Dockerfile
...

COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html

...

...确保将/app/dist/out/更改为/app/中包含已编译前端代码的目录。

• 此镜像还包含默认Nginx配置，无需自行提供。默认将所有请求路由到前端应用（index.html），以便使用"HTML5"完整URL，即使用户直接在浏览器中输入也能正常工作。让Docker镜像从前一阶段复制默认配置到Nginx的配置目录：

Dockerfile
...

COPY --from=build-stage /default.conf /etc/nginx/conf.d/default.conf

...

• 最终的Dockerfile示例：

Dockerfile
# 阶段0，"build-stage"，基于Node.js，用于构建和编译前端
FROM greenaj/node-frontend:12 as build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY ./ /app/

RUN npm run test -- --browsers ChromeHeadlessNoSandbox --watch=false

ARG configuration=production

RUN npm run build -- --output-path=./dist/out --configuration $configuration


# 阶段1，基于Nginx，仅包含已编译的应用，准备通过Nginx投入生产
FROM nginx:1.16

COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html

COPY --from=build-stage /default.conf /etc/nginx/conf.d/default.conf

构建Docker镜像

• 运行以下命令构建新镜像：

bash
docker build -t my-frontend-project:prod .

...如果已添加测试，将运行测试。应用将被编译，最终得到一个精简的高性能Nginx服务器，包含最新编译的应用， ready for production。

• 如果需要传递构建时参数（如Angular的--configuration），例如"staging"环境，可按如下方式传递：

bash
docker build -t my-frontend-project:stag --build-arg configuration="staging" .

测试Docker镜像

• 运行以下命令测试镜像：

bash
docker run -p 80:80 my-frontend-project:prod

...如果在本地运行Docker，现在可在浏览器中访问http://localhost查看前端应用。

提示

• 本地开发：如果有通过如下命令运行的热重载服务器：

bash
npm run start

...请使用它。

本地开发更快更简单。但当准备就绪后，构建Docker镜像并测试，以查看其在完整生产环境中的表现。

• 如果需要Chrome Headless测试，先在本地运行（Karma、Jasmine、Jest等），使用常规浏览器。确保所有配置正确。然后在本地安装Puppeteer，确保本地可运行（使用本地Headless Chrome）。确认本地运行正常后，再添加到Dockerfile，实现"持续集成"和"持续构建"...如有需要，还可添加"持续部署"。但首先确保本地运行正常，分步调试更简单。

• 祝您使用愉快。

高级Nginx配置

可通过将更多Nginx配置复制到/etc/nginx/conf.d/（包含在已有的Nginx配置旁）来添加更多配置。

许可证

本项目基于MIT许可证授权。