Shulou(Shulou.com)06/01 Report--

This article mainly introduces the use of nginx to deploy multiple vue projects under the same domain name and the use of reverse proxies, the article is very detailed, has a certain reference value, interested friends must read it!

Effect.

There are currently 2 projects (project1, project2) and an index.html that comes with nginx. I added the corresponding link code (pasted out later) to manage the routing of sub-projects in a unified manner.

I expect to achieve the following effect (suppose ip: localhost,port: 8080):

Http://localhost:8080/ enters the outermost index.html

Http://localhost:8080/project1 enters Project 1

Http://localhost:8080/project2 enters Project 2

Start configuration

Configuration of Vue

I use the project built by vue-cli2, so I need to modify some configuration parameters of vue.

The index.js under the config folder, because it is packaged, we need to change the corresponding project name in build.assetsPublicPath, such as

/ / project1module.exports = {dev: {}, build: {assetsPublicPath:'/ project1/' / / pay attention to'/'}} / / project2module.exports = {dev: {}, build: {assetsPublicPath:'/ project2/' / / pay attention to'/'}}

The prod.env.js under the config folder is modified like this:

/ / project1module.exports = {NODE_ENV:'"production"', BASE_API:'/ api/pro1 "/ / here corresponds to nginx configuration} / / project2module.exports = {NODE_ENV:'" production "', BASE_API:'/ api/pro2" / / here corresponds to nginx configuration}

[note] because I used BASE_API as the proxy prefix in the project, if yours is not here, you need to find your own proxy configuration

Because everyone's vue-router file configuration is different, you need to find your router configuration file and modify it internally as follows:

/ / I have adopted history mode, but I haven't tested hash mode. It feels like the same effect / / project1export default new Router ({base:'/ project1/', / / pay attention to changing your subitem name, which corresponds to your build.assetsPublicPath mode: 'history', scrollBehavior: () = > ({y: 0}), routes: []}) / / project2export default new Router ({base:' / project2/', / / pay attention to changing your subproject name This corresponds to your build.assetsPublicPath mode: 'history', scrollBehavior: () = > ({y: 0}), routes: []})

[note] there may be an error in npm run build:. Tap (*) and so on, because there is a problem with the version of html-webpack-plugin in the package, you can execute the following statement

# this version is the version in your package.json, but you need to re-specify this version $npm I html-webpack-plugin@4.0.0-alpha-D.

Configuration of Nginx

First of all, my directory is like this, irrelevant files are all in. Show

.├─ conf │ ├─. # other files │ └─ nginx.conf │├─ html # just look here For the time being, I did not use │ ├─ project1 │ │ └─ static │ │ ├─ css │ ├─ fonts │ │ └─ js │ │ ├─ g │ │ V project2 static css fonts g js js V js ─ index.html │ └─ 50x.html └─. # other files

[explanation] my nginx directory is native and contains a html folder inside. In order to save trouble, I directly use this directory. Of course, you can also specify other directories, but for now, please configure the same directory as mine, and you can customize it later.

Now let's configure the nginx.conf file under the conf folder

I modified it directly on the original file, and the modified configuration is in the http module, so I use other unneeded code directly. Instead.

#... # reverse proxy http {include mime.types; default_type application/octet-stream; # log_format main'$remote_addr-$remote_user [$time_local] "$request"'#'$status $body_bytes_sent "$http_referer"#"$http_user_agent"$http_x_forwarded_for"; sendfile on; keepalive_timeout 65; client_max_body_size 20m Client_body_buffer_size 10m; large_client_header_buffers 4 128k; # here you can do cluster upstream p1_server {server localhost:8081;} # here you can do cluster upstream p2_server {server localhost:8082;} server {listen 8080; server_name localhost; charset utf-8; proxy_connect_timeout 180; proxy_send_timeout 180; proxy_read_timeout 180; proxy_set_header Host $host Proxy_set_header X-Forwarder-For $remote_addr; root html; # here specify our folder # total project route, I am lazy to write directly in the same file # if there are many conf files that can be configured, use include to associate location / {try_files $uri $uri/ / index.html # here you can understand the index.html assigned to the html folder} # project1 # here is the configuration build.assetsPublicPath of config/index.js in the vue project, and # is also the base location ^ / project1 {try_files $uri $uri/ / project1/index.html in the router configured in the vue project # here you can understand the index.html} # project2 # assigned to the project1 folder under the html folder. Here is the configuration of project 2 location ^ / project2 {# try_files $uri $uri/ / project2/index.html # here you can understand the index.html assigned to the project2 folder under the html folder. # here is the interface location / api/pro1 that needs to be called for project1 configuration {# this is the configuration of prod.env.js in the vue project BASE_API proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://p1_server; # the p1_server here corresponds to the above configuration upstream p1_server {}, which can be used as a cluster, so I simply configure it} # here is the interface location / api/pro2 {# which needs to be called for project1 configuration. Here is the configuration BASE_API proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr for prod.env.js in the vue project. Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://p2_server; # the p2_server here corresponds to the above configuration upstream p2_server {}, which can be used as a cluster. I simply configure} #.} #.}

Finally, post the code of index.html that I modified.

Because I am additional, so directly post my additional code, other use.

...

Thank you for using nginx.

Project 1 | Project 2

Final debugging

All the configuration is complete, we can start nginx, this will not be solved by yourself.

After launching successfully, we type http://localhost:8080 in the browser and we can see

Click on item 1 and we can see that the link changes to http://localhost:8080/project1

Click on item 2, and the link becomes http://localhost:8080/project2, which is in line with our expectations, and it will be a success.

The above is all the contents of the article "Software uses nginx to deploy multiple vue projects and use reverse proxies under the same domain name". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.