Para implementar múltiples proyectos front-end usando contenedores nginx, puede usar dos métodos: puerto de escucha y configuración basada en la ubicación.
Mi nginx se implementa usando Docker. No hay puertos adicionales abiertos al iniciar, así que uso la ubicación para configurar
un servidor de acuerdo a la ruta raíz. Diferentes agentes acceden a diferentes proyectos.
Ahora practiquemos y preguntemos: ¿Poner el elefante en el refrigerador? Cuántos pasos se necesitan en total: ¡tres pasos!
Paso uno: código de ubicación relacionado con Nginx
worker_processes 1;
events {
worker_connections 1024;
}
http {
client_max_body_size 100m;
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
charset utf-8;
#项目一,同过ip:80直接访问
location / {
root /home/ruoyi-ui/dist; #dist文件的位置(根据自己dist包放置的位置决定)
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
#项目二,同过ip:80/project直接访问
location /project {
alias /home/zero/dist/;#注意第二个项目路径是alias不是root,通常最佳实际是配置一个项目的根root,其他的文件夹则使用alias,毕竟alias更加灵活
try_files $uri $uri/ /project/index.html;
index index.html;
}
#第一个项目(前后端分离)反向代理来解决跨域问题
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#后端服务端口地址:
proxy_pass http://10.10.11.79:8080/;
}
#第二个项目(前后端分离)反向代理来解决跨域问题,要与第二个项目vue里面跨域的配置一致,没有跨域问题可以不配置
location /zero-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#后端服务端口地址:
proxy_pass http://10.10.11.79:8083/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
Al acceder, es ip:número de puerto/+la ruta que configuró: la primera ruta es/ y la segunda ruta es/proyecto
Principalmente en dos lugares:
1. El nombre /proyecto detrás del segundo local debe ser
el mismo que el nombre en la configuración index.js y vue.config.js del proyecto vue
. 2. Problemas entre dominios. La ubicación / en el cuarto local El nombre zero-api/ debe ser coherente con la configuración entre dominios en el archivo vue.config.js en el proyecto vue.
Paso 2: configuración del archivo de configuración del proyecto Vue
1. Modificar index.js
Modifique la ruta, busque el directorio reouter en el directorio src y agregue el atributo base:
base: '/project',
El nombre de este lugar debe ser coherente con el nombre de la ruta después de / en la segunda ubicación del proyecto en nginx.conf.
2. Modificar vue.config.js
Modifique la ruta publicPath de vue.config.js en el directorio raíz:
module.exports = {
publicPath: "/project'",
}
El nombre de este lugar debe ser coherente con el nombre de la ruta después de / en la segunda ubicación del proyecto en nginx.conf.
3. Manejar problemas entre dominios de separación de front-end y back-end
Si no hay requisitos de dominio cruzado, no importa. Ahora el front-end y el back-end están separados y nginx se usa para representar los microservicios de front-end y back-end respectivamente para resolver el problema cruzado. . Modifique vue.config.js:
devServer: {
port: 80, //本地项目端口
proxy: {
"/zero-api": { // 这个意思是:原先以 /zero-api 开头的请求
target: 'http://10.10.11.79:8083', // 凡是以 /zero-api 开头的请求,通通请求这个服务器
changeOrigin: true, // 允许跨域
}
}
},
/zero-api debe ser coherente con zero-api en el proxy inverso en nginx.
Paso 3: implementación
Modifique el archivo de configuración de nginx nginx.conf,
empaquete el segundo proyecto vue en el directorio /home/zero/dist y reinicie nginx.