Deploying the project on a lightweight server (Windows environment) (Background administration page)
Recently, I was interested in the server, so I went to Ali Cloud to buy a student server. I’ll talk about my purchase process in a minute. I am also a rookie programmer. I just got in touch with it and am used to using Windows system, so I do not plan to use Linux system to deploy the project, so I did not choose Linux for my cloud server. I also looked it up on the Internet before, and most people suggested to use The Linux system. Because of some personal reasons, I put Linux aside for now, and when I have time, I will learn it well. I will definitely learn it. Having said some words, let’s get down to business!!
Purchase and configure cloud servers
1. First open the official website of Aliyun
Links:
Aliyun official website
2. Select lightweight servers in the product category (sufficient for learning)
3. For students, there is a discount after real-name registration, which is relatively cheap.
The cloud wing plan
After the first real-name authentication, enjoy the discount
I chose a lightweight server, system image: Windows, and can reset the system later if necessary.
After purchase
Here is a wordy sentence: since I have never touched the server before, I went to the Internet to search other people’s notes, here is the link:
zhuanlan.zhihu.com/p/53651203
Some configurations on the server are also seen here.
Open ports
Configure the firewall first, as shown in yellow, and then red.
Open common ports such as HTTP port 80, HTTPS port 443, SSH port 22, FTP port 21, and MySql port 3306. Of course, you can rudely open all TCP and UDP ports for simplicity, but this is not recommended for security reasons.
Select a domain name and bind the domain name to the server
I bought it directly at the price I chose.
Link: mi.aliyun.com/
Note: when your domain name purchase success, you need to put on record, or your domain name will appear the following information prompt, you need to put on record, domain name record condition is more than three months can. You can also use the Ip address of the public network if you are just learning.
When the domain name purchase is completed, the NEED for DNS resolution, here is not to say, Ali Cloud documents are explained.
After remote connection, you will be asked to set the password twice, the first is the password for the remote connection, and the second is the password for the account on the cloud server.
This is the first password
This is the second password
Windows +R, later to determine
The interface is as follows
Input your public IP address, here said, the local file transfer to the server on a method, in fact, many methods, interested also can try other methods. I’m gonna hit Show options
And then local resources, and then details,
Finally, select the file you want to transfer
The screen after successful connection
At this point, the cloud server has been purchased and you can use it as just another computer.
Deploy the project using Tomcat on the cloud server.
-
Before using Tomcat, install the Tomcat environment on the cloud server. Here is attached a: Tomcat installation tutorial
Or relatively simple, after the installation, try the effect. http://localhost:8080/
If the image above appears, Tomcat has been successfully installed
-
Next we install the JDK environment, mysql environment
Attached are two links:
(1) the JDK: www.cnblogs.com/liuhongfeng…
(2) the mysql: blog.csdn.net/zhouzezhou/…
Once the JDK is installed, let’s check it out
Mysql > install mysql
-
With the environment installed, it’s time to step into the main road.
Going to my local first, I use vscode to open the back-end managed project. It is mentioned here that this project is someone else’s, and I just take it to learn. I mainly study the backend. This front-end project is from Git, and it is well written.
Here is the link: toutiao. IO /g/419312
This is what it looks like when you open it up. I’m not going to talk about the project directory structure, but the main thing to do here is package.
If you’ve used NPM before, the statement is: NPM run build.
Enter on the console
Dev dev dev dev dev dev dev dev dev dev dev dev build
We need to change the configuration in the Build environment
The marked area, which was’/’, was’./ ‘. The reason is: When the packing is completed, the dist folder will be generated, and there are both index.html and static folders in the dist folder. Index.html is the home page of the visit, and static files are stored in the static folder, and the static files need to be loaded when the page is loaded, so the reason why it is changed to “./ “, Because the browser can find the correct static file path, otherwise you open the web page only blank, the console will report an error, interested, can try a wave, also won’t take much time, experience.
Why did we change the build configuration and not the dev configuration? The following is my personal understanding, if there is a mistake in the place also need your help.
Notice where the yellow part of the image is drawn, and we’re back in webpack.prod.conf.js.
If you look at the file path marked in red, this is how it’s packaged. Normally, we do development in Dev, but when we actually produce it, it’s in PROD. Let’s go to prod.env.js.
This is what it looks like when it’s done. So go deploy it on the cloud and run.
Go to the Tomcat folder first
Go to webapps and copy the packaged front-end project DIST file to Webapps
After Tomcat is installed, the default port is 8080, but you can also change the port number in the server.xml file. On the cloud server access address the local IP or localhost: 8080 / project name / 】 my address here is: localhost: 8080 / dist/index. HTML.
Pay attention to
Remember the firewall configuration on the cloud server?
After success, this is an interface. Note that each person’s path may be different, but most of it is mine. Please configure it according to your server.
After landing the interface, I this is connected to the original author’s online background server
This is only a local test on the cloud server, next to my local test, first connect to the address of Tomcat on the cloud server:
Public network (IP) : 8080
This indicates that the cloud server has been connected. If your domain name has been registered, you can use the domain name instead of the public IP address. Because your domain name is already tied to your public IP address.
Success, you can also send your address to others to test, mobile phone is also ok. I won’t describe it here, but Tomcat is still relatively simple. Of course, it took me a while to find out by myself at the beginning, mainly stuck in the address.
Deploy the project on the cloud server using Nginx
Nginx is introduced
1. What is Nginx?
Engine X (Nginx) is a lightweight Web server, reverse proxy server, and email (IMAP/POP3) proxy server.
There are three main ones: I’m going to use Nginx as a Web server.
To find out what a reverse proxy server is, here’s a link:
Baike.baidu.com/item/%E5%8F…
A look will understand!!
Nginx easy tutorial
Give a link here: yq.aliyun.com/articles/62…
How to configure Nginx configuration files.
Let’s download Nginx first
Link: nginx.org/en/download…
I have Windows on both my local and cloud servers, so download the Windows ZIP package
2. After downloading the ZIP package, transfer it to the cloud server
3. Start the nginx server. Go to the CMD directory, open the console, and enter start nginx.
Test locally on the cloud server: localhost
Nginx has been started successfully.
This also means connecting to the cloud server. Big win!
We will refer to the project in the Background administration page of Tomcat for testing
We put the packaged background projects into the 123 folder of the root directory of drive C on the cloud server
With the project deployed, the next most important step,
The most important thing about nginx is how to write configuration files
I used VScode to open nginx3.conf. Here is the code:
#user nobody; worker_processes 1; C:/tool/nginx-1.17.4/nginx-1.17.4/logs/error.log; Error_log C: / tool/nginx - 1.17.4 / nginx - 1.17.4 / logs/error log notice; Error_log C: / tool/nginx - 1.17.4 / nginx - 1.17.4 / logs/error log info; Pid C: / tool/nginx - 1.17.4 / nginx - 1.17.4 / nginx. Pid; {worker_connections 1024; } # set HTTP server, Use its reverse proxy functionality to provide load balancing support HTTP {# Set mime types (mail supported types) that are defined by the mime.types file include C: / tool/nginx - 1.17.4 / nginx - 1.17.4 / conf/mime types; default_type application/octet-stream; $request" "$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; Access_log C: / tool/nginx - 1.17.4 / nginx - 1.17.4 / logs/access log main; rewrite_log on; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; tcp_nodelay on; #gzip switch #gzip on; Port 80 is used to listen to HTTP server 80. Server_name www.hui.com; server_name = server_name; server_name = server_name; server_name = server_name; 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; Dist /dist/ {# home # index index.html index.htm; # root/123; } # static files, nginx processing # localhost ~ ^ / javascript (images' | | js flash | | | CSS media | static) / {# root C: \ Demo \ SRC \ # main \ resources expires 30d; Location /NginxStatus{stub_status on; access_log on; auth_basic "NginxStatus"; auth_basic_user_file conf/htpasswd; } # prohibit access to.htxxx file location ~ /\. } #error handling page (optionally configurable) #error_page 404/404.html; #error_page 500 502 503 504 /50x.html; #location = /50x.html { # root html; #}}}Copy the codeHere mainly describes the server(virtual machine) configuration, other are general configuration, you can find relevant information in the link I sent before, others said very detailed, here mainly focus on three points. 1.server_name 2.location 3.root
Say first server_name, behind the name is can literally, I don’t say casually up because my domain name for the record, so can’t access, so I don’t want to use my domain name, I was literally up a, if you have the record is recommended to use the domain name, is your cloud servers public IP, just give a packaging, It’s not safe to give out an IP address alive. There are also comments on it, so be sure to add something when testing locally on the cloud server.
In my case, I have static files and the home page of index.html in my dist folder. I need the browser to find the webpage of index.html. I configured the path of /dist/. After all, the name of my project is dist, so the access address is www.hui.com/dist/, which is actually the public IP on the cloud server plus the project address. Location: nginx configuration file: nginx configuration file: nginx configuration file: Nginx configuration file Location location
And finally, root, I’m going to say, root, root, because I put dist in 123, because I gave it a path of /123. You can try something else and see if it works.
Nginx root
The root of knowledge
When the file is configured, open the console
Nginx. exe -c conf/nginx3.conf
Next, try using the cloud server and type: www.hui.com/dist/
You can also use localhost, 127.0.0.1, public IP instead of www.hui.com, they only want the same IP address. You can try it out,
Let’s try testing in my local browser.
Look, the test was successful. Big win.
However, if you use a local browser to access www.hui.com/dist/, an error will be reported and the IP cannot be found.
As stated above, if your domain name is accessible, just write your domain name into the nginx configuration file. Ok, use nginx as the Web server deployment project is complete, if there are any errors please correct!!
If reproduced, please attach a link!