nginx部署多个web项目
发布时间
阅读量：
阅读量
前提说明：
1. web项目使用的是vite+vue3
2. 服务器中的nginx的路径在：/usr/local/nginx
3. 配置文件在：/usr/local/nginx/conf/；文件名：nginx.conf
配置中指定的文件路径为 /usr/local/nginx/html ；浏览器端口地址为http://ip.port，请参考下图以获取详细信息。
解释：
第一个Web项目位于红框区域。部署完成后,浏览器可访问地址：http://ip:port/（若默认使用80端口,则需在nginx.conf文件中将端口参数设置为80）
蓝框部分属于第二个Web项目。在线服务器部署完成后，在线服务器会自动打开记录页面：http://ip.port/record_plat/(若未指定默认端口，默认情况下，默认端口设置为80，则用户可以直接访问http://ip/record_plat/)
下面是步骤：
1. web项目打包。正常的npm run build，即可。注意点：
红框项目位于域名（ip+port）的根路径上，在浏览器端即可通过访问该域名查看网页内容。具体配置内容则包含于vite.config.js文件中
export default defineConfig((option) => {
const options = {
......
base: "/", // 这样就可以
plugins: [vue()],
......
};
return options;
});
javascript
蓝框项目由于被部署于子路径中, 即浏览器才能通过"域名/子路径"访问. 因此, 在vite.config.js文件中
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd());
const { VITE_APP_ENV } = env;
const options = {
......
base: VITE_APP_ENV == "prod" ? "/record_plat/" : "/", // 注意这里的“/record_plat/”，这个就是蓝框项目部署的子路径
plugins: [vue()],
......
};
if (command == "build") {
options.esbuild = {
drop: ["console", "debugger"],
};
}
return options;
});
javascript
同时需要将router下的基础路径也改为子路径，即：
export const router = createRouter({
history: createWebHistory(import.meta.env.VITE_APP_ENV == "prod" ?"/record_plat/" : ""), // 修改这里
routes,
});
javascript2. 服务器端的nginx配置，找到nginx.conf文件
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
# 监听的端口
listen 80;
server_name localhost;
# 这是红框项目的配置
location / {
root /usr/local/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# 这是蓝框项目的配置
location /record_plat/ {
alias /usr/local/nginx/html/record_plat/;
try_files $uri $uri/ /index.html =404;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
bash
注意点：
在设置 alias 时需注意其后面的配置路径，并且必须在最后添加该符号以避免错误信息的触发
2. alias和root的区别：
全部评论 (0)
还没有任何评论哟~