foreword
-
Recently, in the actual development process, two projects need to be deployed on the server. Requires nginx second-level domain name.
-
At the beginning, I searched around on the Internet, and each had their own opinions, which were not very comprehensive and very confusing. Here is a record of my successful second-level domain name agency.
-
There are many articles on the Internet saying that the router.js file is required, and the path of the publicPath in vue.config.js is required. Don't bother.
-
Many articles say that it is enough to configure two servers in nginx, but in fact, if you do not resolve the domain name, you will not be able to access it (emphasis).
Implementation
1. The router.js of the two projects does not need this
2. The path of publicPath in vue.config.js can use a relative path.
publicPath: './',3. Where the server domain name resolves the secondary domain name (where the domain name is purchased, such as Alibaba Cloud)
Take Aliyun as an example
1. Find the console - domain name - resolution setting place
2. Click Parsing Settings to add records, you only need to set 2 places, the name of the second-level domain name, and the address of the domain name binding server
4. Nginx configuration
Before configuring, let me explain the server to you. Take our domain name www.baidu.com as an example
server {
listen 80;
#1.定义服务器的默认网站根目录位置(就是默认域名比如www.baidu.com)
server_name localhost;
#2.dist文件放在位置
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #解决页面刷新404问题
}
#3.服务器运行的后端架包地址
location /api/ {
proxy_pass http://localhost:8080;
proxy_set_header Host $HOST;
rewrite "^/api/(.*)" /$1 break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}1. server_name can be understood as a domain name address, localhost is www.baidu.com
2. Root is the location of your dist file in nginx, usually placed in the nginx-html folder.
3./api/ is the logo of the front-end vue.config.js cross-domain proxy, rewrite "^/api/(.*)" /$1 break; this sentence is the same as removing this logo from the config file
pathRewrite: {
// 重写路径: 去掉路径中开头的'/dev-api'
'^/dev-api': ''
}We need to have a clear concept. After the front-end project is packaged, vue.config.js is invalid and forwarded through nginx, but after we package it, it is a production and online environment, so this /api/ needs to be in the front-end.env.production file corresponding to the identification.
4. In this way, there are only a few important configurations of our server. When we launch two projects, after copying a server and domain name resolution, we can configure the important places of the server to access the second-level domain name.
Nginx-conf folder-nginx.conf all configured
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 html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #解决页面刷新404问题
}
location /api/ {
proxy_pass http://localhost:8080;
proxy_set_header Host $HOST;
rewrite "^/api/(.*)" /$1 break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#二级域名
server {
listen 80;
server_name weibao.baidu.com;
#这里root是因为我在html文件夹中新建了一个main文件夹，这个文件夹中放第二个项目dist文件
location / {
root html/main/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #解决页面刷新404问题
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /prod-api/ {
proxy_pass http://localhost:8800;
proxy_set_header Host $HOST;
rewrite "^/prod-api/(.*)" /$1 break;
}
}
}
Result: In this way, we will deploy 2 projects on the server, more similar
1. Visit www.baidu.com for the main project
2. The second project www.weibao.baidu.com
Notice:
It can be copied, but you need to change the important places mentioned above. The second-level domain name resolution is very important (otherwise it will be useless)
Summarize:
After this process, I believe you also have a preliminary impression of Nginx-deploying 2 vue projects (multiple projects)-secondary domain name setting proxy, but the situation we encounter in actual development must be different. , so we have to understand its principle, and it is always the same. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen