0
877
ViewsImplemente la aplicación angular en el servidor nginx con Docker Bienvenido a nginx
Desarrollé una aplicación Angular 7 y ahora la implementaré en un servidor de producción en un servidor nginx. Soy bastante nuevo en la implementación de frontend en el servidor nginx , por lo que probablemente me esté perdiendo algo fácil de encontrar. Decidí usar Docker para administrar la implementación.
El nombre de la aplicación es MyWalletFe .
archivo de configuración del servidor nginx
Ruta: ./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 Donde copio mi archivo de configuración nginx en la ubicación predeterminada, luego copio el resultado de npm run build de la etapa anterior en /usr/share/nging/html .
Producción
Siempre obtengo la página web predeterminada de nginx:
Y la razón por la que esto sucede es que la carpeta /app/dist contiene una subcarpeta con el nombre de la aplicación, MyWalletFe , que contiene todo el archivo de la aplicación Angular (la imagen se toma después de ejecutar localmente npm run build para mostrar la carpeta estructura):
mientras que en el servidor de producción en la carpeta /usr/share/nginx/html todavía está el index.html predeterminado con esta página que se sirve.
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
Creo que para que esto funcione, el contenido de la carpeta MyWalletFe debe copiarse a la carpeta principal ( /usr/share/nginx/html ); en este caso, default.conf o Dockerfile contienen algunos errores.
¿Hay algo que esté configurado de forma incorrecta? En la sección de Recursos he añadido el artículo que seguí.
Recursos
3 answers
Answer question0
puede agregar el comando para eliminar la página de índice nginx predeterminada justo antes de copiar
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/htmly cambie su configuración de nginx a:
try_files $uri $uri/ /index.html =404;0
Cambie la última línea de su archivo acoplable a:
COPY --from=builder /app/dist/ /var/www/html/Y para aplicaciones de una sola página como Angular, debe cambiar su configuración de Nginx a esto:
try_files $uri $uri/ /index.html;0
A veces, la causa puede ser la cosa más estúpida, tener algo como esto en mi angular.json:
"projects": { "my-app": { "architect": { "build": { "options": { "outputPath": "dist/my-app",eso estaba causando que mi aplicación fuera copiada a /usr/share/nginx/html/my-app
Espero que no pierdas varias horas rompiendo tu mente como yo :||