Use nginx para implementar múltiples proyectos front-end
Resumen personal de 3 métodos para lograr la implementación de múltiples proyectos front-end utilizando nginx en un servidor.
- Configuración basada en dominio
- Configuración basada en puerto
- Basado en la configuración de ubicación
Antes del inicio oficial, echemos un vistazo al archivo de configuración predeterminado instalado por nginx: /etc/nginx/nginx.conf file
Como puede ver en la imagen :, include /usr/nginx/modules/*.confla función de esta oración es cargar todos los archivos * .conf en el directorio / usr / nginx / modules / al inicio de nginx. Por lo tanto, para facilitar la administración, podemos definir nuestro propio archivo xx.conf en este directorio. Pero tenga en cuenta que debe terminar con .conf.
Después de la introducción, hablemos primero sobre el uso más común y cuántas empresas lo usan en línea.
Configuración basada en dominio
Según la configuración del nombre de dominio, la premisa es que la resolución del nombre de dominio se configura primero. Por ejemplo, si compró un nombre de dominio usted mismo: www.fly.com. Luego configura 2 nombres de dominio de segundo nivel en segundo plano: a.fly.com, b.fly.com.
El archivo de configuración es el siguiente:
- Configure el archivo de configuración de a.fly.com:
vim /usr/nginx/modules/a.conf
server {
listen 80;
server_name a.fly.com;
location / {
root /data/web-a/dist;
index index.html;
}
}
- Configure el archivo de configuración de b.fly.com:
vim /usr/nginx/modules/b.conf
server {
listen 80;
server_name b.fly.com;
location / {
root /data/web-b/dist;
index index.html;
}
}
La ventaja de este método es que el host solo necesita abrir el puerto 80. Luego, si lo visita, puede acceder al nombre de dominio de segundo nivel directamente.
Configuración basada en puerto
El archivo de configuración es el siguiente:
- Configure el archivo de configuración de a.fly.com:
vim /usr/nginx/modules/a.conf
server {
listen 8000;
location / {
root /data/web-a/dist;
index index.html;
}
}
# nginx 80端口配置 （监听a二级域名）
server {
listen 80;
server_name a.fly.com;
location / {
proxy_pass http://localhost:8000; #转发
}
}
- Configure el archivo de configuración de b.fly.com:
vim /usr/nginx/modules/b.conf
server {
listen 8001;
location / {
root /data/web-b/dist;
index index.html;
}
}
# nginx 80端口配置 （监听b二级域名）
server {
listen 80;
server_name b.fly.com;
location / {
proxy_pass http://localhost:8001; #转发
}
}
Se puede ver que un total de 4 servidores se inician de esta manera, y la configuración es mucho menos simple que la primera, por lo que no se recomienda.
Basado en la configuración de ubicación
El archivo de configuración es el siguiente:
- Configure el archivo de configuración de a.fly.com:
vim /usr/nginx/modules/ab.conf
server {
listen 80;
location / {
root /data/web-a/dist;
index index.html;
}
location /web-b {
alias /data/web-b/dist;
index index.html;
}
}
Nota: Si se configura de esta manera, la ubicación / directorio es root, y el otro usa un alias.
Como puede ver, la ventaja de este método es que solo tenemos un servidor y no necesitamos configurar un nombre de dominio de segundo nivel. Y para configurar en el proyecto front-end二级目录
Para la configuración de reacción, consulte: https://blog.csdn.net/mollerlala/article/details/96427751?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevantbn- -BlogCommendFromBaidu-2
Consulte la configuración de vue: https://blog.csdn.net/weixin_33868027/article/details/92139392