preface
I believe that most front-end beginners are not in touch with the work related to deployment. They usually hand over the code package to the back end, or complete the code update through CI and FTP. As for how to deploy the code and how to change the domain name to the front-end code package, many front-end beginners have not done the actual operation, so naturally they do not know. This article is intended to help those of you who are not familiar with deployment learn how to deploy a front-end project on a server live. It will take you through this thread to get familiar with NGINx
I remember in the summer vacation of 2017, before the sophomore year began, I could only write some simple codes, and I had no contact with Linux and operation and maintenance at all. I impulsively bought a server and a domain name in Aliyun, and the domain name was no longer accessible. At that time, OUT of pure interest, I wanted to set up a website, but I didn’t know how to ask others for help due to my lack of strength. After a month of hard work, I finally successfully deployed wordpress service on the server, and the subsequent domain name filing was also successful.
I vaguely remember sitting in the living room in the middle of a summer evening, sweating on my head and dry eyes because of concentration. I tried again and again in the face of documents I could not understand. I don’t want you to waste your time on this, which is why I wrote this article.
Front knowledge
- A cloud server, ali Cloud, Tencent cloud, XX cloud, the first purchase or student certification is a great discount (this paper takes Ali Cloud as an example)
- Understand Linux basic commands, that is, add, delete, change and check various files
- This tutorial is based on CentOS 7.5 system. If you use the graphical interface or other systems, the commands may not be completely consistent, but the flow is the same. It is recommended to see the corresponding tutorial
- Related tools Upload files FTP SSH tool Provided by the Ari Cloud
Important: If Linux base commands do not. The following also don’t need to see, immediately to learn
Set up the environment
Buy an ECS cloud server, some time ago discount, a year 1 core 2G less than 40 yuan ~, the new long-term preferential
Connecting to the server
Log in to the server using a remote tool (CRT, Xshell) or a built-in remote connection. The connection mode is a public IP address
Install nginx
CentOS with yum command, this command is key, understand yourself
Execute the command
# yum install nginx # yum install nginxCopy the codeAfter the installation is complete, the nginx service is available on the host
nginx
Copy the codeAfter the startup is complete, the browser accesses the public IP address to access the default home page of Nginx
At this point, nginx deployment is a success
Path to nginx-related files
/etc/nginx/ usr/share/nginx/ / default front-end code storageCopy the codeThe default configuration in/etc/nginx/nginx. Conf, nginx, according to the default configuration, listen on port 80, 80 port specifies the/usr/share/nginx/HTML this folder, So you go to public IP -> public IP :80 -> /usr/share/nginx/html and “Welcome to CentOS” appears
If you want to display your own project instead of the default page, replace root in /etc/nginx/nginx.conf with the path to your own package
Set up a site on port 7777
Our code can be deployed on other ports besides the default port 80, such as 8888,7777, and so on
Next we deploy a site on a custom port
Here we need to pay attention to one line of configuration in nginx.conf
All nginx configuration files in the target folder will automatically take effect
Conf = /etc/nginx/conf.d/; conf = /etc/nginx/conf.d/; conf = /etc/nginx/conf.d/
Write content via ·vi
server {
listen 7777;
server_name _;
root /usr/share/nginx/test;
}
Copy the codeCreate an index.html file under /usr/share/nginx/test
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<div>This is port 7777</div>
</body>
</html>
Copy the codeFinally, restart nginx
Nginx restarts are instantaneous. If no error is reported, the restart succeeds
nginx -s reload
Copy the codeAccess our deployed project IP :7777
Then you will find that you cannot access, and the access times out (==). This is because the server limits the accessible ports. In this case, you need to set a security group in the cloud management background
Add security group rules on the ESC server background
Then you can access it normally!
Deploy a VUE project
With the example above, we can already deploy a custom site, what about a real project, such as a VUE project deployed to port 3006
- Start by writing xxx.conf
server {
listen 3006;
server_name _;
# Enable gzip configuration
gzip on;
gzip_static on;
gzip_min_length 2k;
gzip_buffers 4 8k;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon application/javascript;
gzip_comp_level 9;
gzip_disable "MSIE [1-6]\.";
# site code path
root /usr/share/nginx/client;
# Single page app must be set (refresh 404 issue)
location / {
try_files $uri $uri/ /index.html; }}Copy the code- Upload the packaged code to the destination folder via FTP
/usr/share/nginx/client(Note the folder name) - Restart the nginx
nginx -s reload
This completes the deployment of a site! Isn’t that easy
Binding domain
It is not good to use IP + port directly for others to access. Everyone has bound their own site to a good memory of the domain name, so how to bind domain name?
- Buy a domain wanwang.aliyun.com/domain/, record the domain…
- Once the registration is complete, the domain name can be used
We need to modify our nginx configuration by changing the value of server_name to the domain name that needs to be bound.
server { listen 3006; server_name xxx.com; / /...Copy the codeAdded HTTPS support
- Apply for an HTTPS certificate, digital certificate management, to Ali cloud as an example, domestic cloud manufacturers have
- Put the certificate in a folder on the server that you can remember
- Modify the nginx configuration
server { // # autocall HTTP to HTTPS for the current domain name
listen 80;
server_name xxx.com;
rewrite ^(.*)$ https://$hostThe $1 permanent;
}
server {
listen 443 ssl http2;
server_name xxx.com;
ssl_certificate xxxx/yy.pem; # certificate
ssl_certificate_key xxxx/yy.key; # Certificate key
Configure SSL authentication
ssl_session_timeout 5m; # cache expiration datessl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4;# Encryption algorithmSsl_protocols TLSv1 TLSv1.1 TLSv1.2;# Secure link optional encryption protocol
ssl_prefer_server_ciphers on; Use the preferred algorithm on the server side
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/client;
location / {
try_files $uri $uri/ /index.html; }}Copy the codeRelated to recommend
Ssh-based lightweight front-end update solution article link, personal projects with this very OK, very convenient, a command to update the code
GitLab CI/CD based on the front-end update solution article link, the company suggested using this project
conclusion
Although the deployment of a site, just to use nginx, but the knowledge involved is still a lot of knowledge, an experienced developer to deploy a site, perhaps half an hour to finish, but for the novice encountered an error is a disaster
If there is an error, we must carefully check the error information, Baidu Baidu can get the answer, if it is not, directly redo the cloud server system, start again;
If you encounter any questions during the learning process, please go to QQ group 530496237 to answer your questions