Simple deployment of front-end project with nginx

Posted on

There are many online tutorials written a lot of things, novices may be a bit confused, now I write this article is to better help novices, how to deploy their front-end projects to their own servers.

First of all, we must have our own Ubuntu server. If we don’t have one, we can go to Alibaba cloud’s official website to buy one. Now Alibaba cloud is engaged in activities. PS: I didn’t advertise

Then we prepare our front-end project, whether you are a Vue project or an ordinary jQuery project, it is the same. The front-end project of this article is Vue.

Clone it to our server through git, and my front-end project is in / home

The following is my front-end project directory and content, we mainly use the packaged dist folder.

Simple deployment of front-end project with nginx

Then we started installing nginx

Simple deployment of front-end project with nginx

After installation, let’s simply configure nginx

Enter the directory / etc / nginx / sites enabled, and then copy a copy of the default to the current folder. I’ll name it myself. Now I’ll name it resume.zengjielin.top

Simple deployment of front-end project with nginx

Then we modify it resume.zengjielin.top The contents of the document are as follows

Simple deployment of front-end project with nginx

You just need to change the part of my red box

Explain_ Name write your domain name

Locations write the path of your front-end directory. You can view the path of your front-end through the command PWD. There is a screenshot on it.

Then save and restart your nginx configuration.

Simple deployment of front-end project with nginx

Next, we visit our website: resume.zengjielin.top (copy the website to the browser to view the results)

Deploying front end project to server using nginx

Technical label:node.js  The server  Front end development

1、 Upload the packaged code of the local front end to the server

For example, the dist folder of the front-end project is the packaged code

Simple deployment of front-end project with nginx

The SCP command is used under Mac to transfer the file to the server directly

SCP – P – R / git project / code / dist root @ (server IP): / Project

The above command is to transfer the local / git project / code / dist file to your server’s / project directory

Simple deployment of front-end project with nginx

The dist file is in the corresponding directory of the server

2、 Configure nginx

modify nginx.conf

The location is / usr / local / nginx / conf

Simple deployment of front-end project with nginx

If the 8086 port here belongs to Alibaba cloud server, it should be opened first

Simple deployment of front-end project with nginx

After modification, restart nginx.

There are pits here. If you find that the modification doesn’t work, there are the following solutions

1. Maybe the previous nginx service has not been shut down

You can use the command

ps aux | grep nginx

kill -9 6446 6447

Shut down nginx service

Simple deployment of front-end project with nginx

2. Specify the configuration file to use when nginx is turned on

CD to the target of starting nginx

cd /usr/local/nginx/sbin

Start nginx with the specified configuration

nginx -c /usr/local/nginx/conf/nginx.conf

Simple deployment of front-end project with nginx 

The common command of nginx is attached

Sudo nginx (start nginx)

Sudo nginx – s reload (restart nginx)

3、 Local access

After the above two steps have been completed, we will visit them locally nginx.conf You can access the domain name and port set in

Simple deployment of front-end project with nginx

4、 Cross domain request

We just set it up nginx.conf One configuration is

Simple deployment of front-end project with nginx

It means that the port of the background service is 8000. When I access the server_ name:8086/api/ It will flow to the service opened in the background.

So when the front page requests the background, the domain name and port should be server_ name:8086/api/

Example: the following figure shows the path for the front end to initiate the request

Simple deployment of front-end project with nginx

[](https://creativecommons.org/l…This article is the original article of blogger, follow theCC 4.0 BY-SACopyright agreement, reprint please attach the original source link and this statement.

Link to this article:https://blog.csdn.net/a_wtf_pgm/article/details/105103958

Leave a Reply

Your email address will not be published.