使用 Docker 在 nginx 服务器上部署 Angular 应用程序欢迎使用 nginx

Question

我开发了一个 Angular 7 应用程序，现在我要将其部署在 nginx 服务器上的生产服务器上。我对 nginx 服务器上的前端部署还很陌生，所以可能我错过了一些容易找到的东西。我决定使用 Docker 来管理部署。
应用程序名称是

MyWalletFe

。

---

nginx服务器配置文件

路径：

./conf/default.conf

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

}

Dockerfile

# build
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# deploy
FROM nginx
EXPOSE 80
COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/ /usr/share/nginx/html

我将 nginx 配置文件复制到默认位置，然后将前一阶段的

npm run build

的输出复制到

/usr/share/nging/html

中。

输出

我总是得到默认的 nginx 网页：

发生这种情况的原因是文件夹

/app/dist

包含一个名为应用程序名称的子文件夹

MyWalletFe

，其中包含Angular应用程序的所有文件（图像是在本地运行后拍摄的

npm run build

以显示文件夹结构）：

在生产服务器上的文件夹

/usr/share/nginx/html

中，仍然存在默认的

index.html

并提供此页面。

root@3b7da83d2bca:/usr/share/nginx/html# ls -l
total 12
-rw-r--r-- 1 root root  494 Mar  3 14:32 50x.html
drwxr-xr-x 2 root root 4096 Apr 13 20:32 MyWalletFE
-rw-r--r-- 1 root root  612 Mar  3 14:32 index.html

我认为要使其工作，应将

MyWalletFe

文件夹的内容复制到父文件夹 (

/usr/share/nginx/html

)；在这种情况下

default.conf

或

Dockerfile

包含一些错误。
是否有什么配置错误的？在资源部分，我添加了我关注的文章。

资源

Docker 中的 Angular 与 Nginx

Answer 1

您可以在复制之前添加命令来删除默认的 nginx 索引页

COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*  <--- add this
COPY --from=builder /app/dist/ /usr/share/nginx/html    

并将您的 nginx 配置更改为：

try_files $uri $uri/ /index.html =404;

Answer 2

将 docker 文件的最后一行更改为：

COPY --from=builder /app/dist/ /var/www/html/

对于像 Angular 这样的单页应用程序，您应该将 Nginx 配置更改为：

try_files $uri $uri/ /index.html;

Answer 3

有时原因可能是最愚蠢的事情，在我的 angular.json 中有这样的东西：

  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",

这导致我的应用程序被复制到 /usr/share/nginx/html/my-app

我希望你不要像我一样浪费几个小时来打破你的想法:||

Answer 4

如果您使用 Angular 17，主文件夹的位置会发生一些小变化：不再直接位于 dist 甚至为您指定的文件夹中，而是有一个名为 browser 的新子文件夹。 browser 已成为构建后可以在其中找到 index.html 的主文件夹。 因此，docker 文件中将发生一个小变化：

您必须将浏览器添加到路径

# build
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# deploy
FROM nginx
EXPOSE 80
COPY ./conf/default.conf /etc/nginx/conf.d/default.conf

# You must add browser to path

COPY --from=builder /app/dist/browser /usr/share/nginx/html