In the multi project deployment, nginx is used for proxy forwarding. Different problems are encountered. It is configured for many times and tested. Finally, the desired effect is achieved. Make a special record to prevent you from getting lost next time...
Project:
-
Personal blog based on vuepress
-
Find an official website project built by vue in github
-
The Vue admin template project contract described earlier
Requirements: all three projects can be accessed and used.
Environment and project deployment test
-
linux 8.0
-
nginx version: nginx/1.14.1
-
mysql 8
Deployment project
1. Package the blog items (dist) and transfer them to the server at the path /home/. After uploading, modify dist to blog
2. Package the website project (dist) and transfer it to the server at the path /home/. After uploading, modify dist to website.
3. Package the contract front-end project (dist) and transfer it to the server at the path /home/. After uploading, modify dist to contract; And upload the backend project jar file to /home/contract/; The sql file is also uploaded to the corresponding directory, and I transfer it to the contract for importing into mysql.
As for linux operations, the above operations are all basic operations, so I won't introduce them. Mainly cp, mv, ls, etc.
Import the sql file in the contract project into the mysql database:
-
Log in to mysql. Enter mysql -u root -p and then enter the mysql password
-
Create database contract
-
Import the SQL file. Enter source /home/contract/contract sql
Configure Nginx
The above steps only deploy the project to the corresponding directory. If you want to access through the domain name, you need to configure the corresponding forwarding agent. I use Nginx. In addition, because you want to access through the domain name, prepare the domain name: www.fuzm Wang and ai fuzm. wang. One is the primary domain name and the other is the secondary domain name. The secondary domain name is established and resolved to the same server according to its own needs.
plan:
-
Via www.fuzm Wang directly accesses the blog project. Website: http://www.fuzm.wang
-
Via www.fuzm Wang plus the name of the website project to access the website project. Website: http://www.fuzm.wang/website
-
Through the secondary domain name ai fuzm. Wang accesses the front end of the contract. Website: http://ai.fuzm.wang
-
Through the secondary domain name ai fuzm. Wang/api accesses the back-end interface of contract.
1. Edit the nginx configuration file nginx conf. According to their own installation
vim /etc/nginx/nginx.conf
2. Add blog access configuration
In nginx The server node of conf is configured as follows
location / {
root /home/blog/;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
Try is used here_ Files to match the access path. For details, please refer to this article:
Alias, root, try in nginx_ Usage of files_ My_Bells blog -CSDN blog_ alias try_files
The configured server nodes are as follows:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name www.fuzm.wang;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /home/blog/;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
3. Add the access configuration of the website, because the blog and website plan to use www.fuzm Wang to access, they are all configured under the same server node.
In nginx Continue to configure in conf as follows
location /website {
root /home/;
try_files $uri $uri/ @router_website;
index index.html index.htm;
}
location @router_website {
rewrite ^.*$ /website/index.html last;
}
Pay attention to:
lcaltion /website Inside root /home/; The configuration here cannot be like location / Inside root /home/blog/; Same match /home/website
You can see the articles I recommended above.
The use of root will match /website as a url to access the link. Go to /website to find the index.
(1) If you use root /home/website/, nginx will return the files in /home/website/website/. But we don't have this
(2) If root /home/ is used, nginx will return the files in /home/website/. That's exactly how we deployed it. Can be accessed normally.
Or it looks more comfortable. Obviously, it points to /home/website/. You can do this:
Instead of root, use alias to configure as follows:
location /website {
# root /home/;
alias /home/website/;
try_files $uri $uri/ @router_website;
index index.html index.htm;
}
In this case, because of alias, it will directly replace /website in location. nginx will return the in /home/website/, which is exactly what we need.
To summarize:
root: http://www.fuzm.wang Access this because using root, nginx will find the file under /home/blog/ and return to normal.
alias: http://www.fuzm.wang/website Access this because with alias, nginx will find the file under /home/website/ and return to normal.
Through the browser, you can access these two websites normally. Currently, the nginx configuration file server node is as follows:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name www.fuzm.wang;
# root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# Item 1: blog configuration
location / {
root /home/blog/;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
# Item 2: website configuration
location /website {
# root /home/;
alias /home/website/;
try_files $uri $uri/ @router_website;
index index.html index.htm;
}
location @router_website {
rewrite ^.*$ /website/index.html last;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
Here, you can normally access these two projects through the domain name
4. To configure the template project. Because the domain name ai fuzm. Wang access, so create a new server node for configuration
At www.fuzm Under the server node of Wang, create a new
server {
listen 80;
server_name ai.fuzm.wang;
location / {
root /home/contract/;
index index.html index.htm;
}
}
So you can http://ai.fuzm.wang Visited the front page
The front-end production environment is configured as follows:
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://ai.fuzm.wang/api"',
}
This means that all back-end API requests are made through“ http://ai.fuzm.wang/api "For interaction, for example, to access login, the request is: http://ai.fuzm.wang/api/login
Back end configuration file application The YML configuration includes the following:
server:
port: 8082
servlet:
context-path: /api
In this case, the /api here is used to http://ai.fuzm.wang/api Matches accessed are forwarded to port 8082
After accessing the front page normally, try to log in:
You can find the error message on the right: Post http://ai.fuzm.wang/api/login 502 (Bad Gateway)
It is normal because our backend is not running and cannot be accessed, and the corresponding route forwarding has not been configured.
After running the jar package, it will listen to port 8082.
This indicates that our backend jar has been running. The use of wget localhost:8082 directly on the server is connectable.
We want to use base configured on the front end_ API: '" http://ai.fuzm.wang/api Access the back-end interface. Then continue to configure nginx proxy forwarding:
On top ai fuzm. Add configuration in the server node of Wang
location /api {
proxy_pass http://localhost:8082/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
This means that you will request: http://ai.fuzm.wang/api Proxy forwarding proxy for requests (that is, the BASE_API configured on the front end)_ Pass to http://localhost:8082/api/ And this is where our back-end interface is located. Naturally, it can enter our backend request.
Login, the back-end return password is incorrect, and the status code is 200. Enter the correct password, log in successfully, and the view request is normal.
In this way, we can access our back-end interface through the front-end request.
Attach the complete nginx Conf file
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name www.fuzm.wang;
# root /usr/share/nginx/html;
# root /home/zhaomei/fzm;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /home/blog/;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
location /website {
alias /home/website/;
try_files $uri $uri/ @router_website;
index index.html index.htm;
}
location @router_website {
rewrite ^.*$ /website/index.html last;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 80;
server_name ai.fuzm.wang;
location / {
root /home/contract/;
index index.html index.htm;
}
location /api {
proxy_pass http://tomcatserver/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers PROFILE=SYSTEM;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
test
If the above three items are accessed normally through the browser, the configuration is successful. It's time to call it a day. I always feel like something is missing, but I can't remember it. First of all.
Take a look at my learning - Hexo based personal blog:
Website: http://www.fuzm.wang
------------—
As a beginner, I haven't mastered a lot of knowledge. Forgive me. If you have any mistakes, please point them out in order to make progress. Thank you!. There will be new learning in the future, and we will continue to supplement it.