Развертывание angular приложения на nginx сервере с Docker Добро пожаловать на nginx - PullRequest
Новая
       66

Развертывание angular приложения на nginx сервере с Docker Добро пожаловать на nginx

0 голосов
/ 14 апреля 2020

Я разработал приложение 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:
enter image description here
И причина, по которой это происходит, в том, что папка /app/dist содержит подпапку с названием приложения, MyWalletFe, который содержит весь файл приложения Angular (изображение берется после локального запуска npm run build для отображения структуры папки):

Folder structure

в то время как на рабочем сервере в папке /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 содержат некоторые ошибки.
Что-то настроено неправильно? В разделе Ресурсы я добавил статью, за которой следовал.

Ресурсы

Angular в Docker с Nginx

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Вы можете добавить команду для удаления страницы индекса 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;
0 голосов
/ 14 апреля 2020

Измените последнюю строку вашего docker файла на: 

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

А для одностраничных приложений, таких как Angular, вы должны изменить конфигурацию Nginx на эту: 

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