在Docker上部署Angular应用程序到nginx服务器，欢迎使用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/nginx/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可能存在一些错误。是否有一些配置错误？在资源部分，我添加了我所遵循的文章。

资源

使用Nginx在Docker中运行Angular

- A. Wolf

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;

- Fateh Mohamed

---

谢谢！所以问题出在/usr/share/nginx/html/目录下的默认文件上了。为什么我要以那种方式修改nginx配置呢？ - A. Wolf

Answer 2

有时候问题的原因可能是最愚蠢的事情，比如在我的 angular.json 文件中有这样的内容：

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

这是导致我的应用被复制到/usr/share/nginx/html/my-app的原因

我希望你不要像我一样浪费数小时苦思冥想 :||

- LeonardoX

Answer 3

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

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

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

try_files $uri $uri/ /index.html;

- Vala Khosravi