Recently, I deployed a front-end React, back-end Node.js (Koa2), database MongoDB front-end and back-end separation project with Alibaba Cloud Server. I stepped on a lot of pits in the process. Use this article to record the specific steps. I hope you can helpful.
1. Server selection and purchase
All types of servers can be seen on the product page of Alibaba Cloud official website . According to my observations on the Internet, most people use ECS cloud servers and lightweight application servers. Lightweight application servers are products developed based on ECS cloud servers. Mainly for entry-level cloud computing and simple applications, highlighting the word "lightweight", it is more than enough to use in our personal projects, if your server needs to perform persistent high-load operations, then you can use ECS cloud server . (For the specific difference, please refer to the difference between ECS cloud server and lightweight application server ). Here I am using a lightweight application server.
Enter the purchase page of the lightweight application server, choose the server region close to your own region, of course, if your server region is selected in the country, your domain name needs to be filed (but you can also directly access the server ip without using a domain name) , The filing process may take more than ten days. If you are in a hurry to go online, you can choose the region in Hong Kong. The disadvantage is that it may be far away from your region and there is a delay. Mirroring needs to choose system mirroring and application mirroring. If no application is used to build our website, here we choose system mirroring, because I am not very familiar with linux system, so I chose windows2019 data center version for system mirroring, package The configuration is based on your own needs (and financial resources). Because I am shy in my pocket, I chose the lowest version. We don't need to add other data disks. The length of purchase depends on our own situation.
Since Alibaba Cloud recently launched a developer growth plan, there is a great discount for choosing three months or more. If you are a student, you can also enjoy exclusive student benefits.
2. Purchase of domain name
This step is not necessary. You can purchase a domain name mapped to the server for access, or you can directly use the server's ip to access, and the registration of the domain name takes a long time. In this step, consider whether you need to use a domain name according to your actual situation.
The domain name is purchased in Alibaba Cloud.com . Enter the domain name you want to register (see if it is already registered) and purchase it. Choose a different suffix according to your actual situation. After purchasing a domain name, you need to perform real-name authentication and use the information of your ID card. This process is generally very fast and can be done in a few minutes. (Control Panel-Products and Services-Domain Name-Domain Name List-View your own domain name and select "Manage").
3. Domain name resolution
After real-name authentication of the domain name, domain name resolution can be carried out. (If your server is in China, you need to file after authentication, and you can only file for 2-3 days after real-name authentication ) The so-called domain name resolution is to bind the domain name and your server ip binding, so that the user is accessing the domain name It will automatically resolve the mapping to the server ip. The specific steps can be to open your server, find the "domain name" in the site settings on the left column, and then resolve it. Here, my domain name has been resolved.
4. Transfer the project code to the server
Since I am using a mac, Microsoft Remote Desktop Beta is recommended for the terminal that operates the remote server on the mac. The interface is elegant and the operation is convenient. Microsoft Remote Desktop Beta can go to search engines to search for downloads.
After the download is complete, enter your server account and password to connect. The account and password can be set in the "Server Operation and Maintenance"-"Remote Connection" of the lightweight application server . At this point, we can connect to the remote server.
There are several ways to transfer the project code to the server:
- Use github, upload the code locally to github, and pull the code on github on the server side
- Mac users use the command line that comes with the system terminal
- Use filezilla for file transfer
Here we recommend the first method, I believe that the use of git is not unfamiliar to everyone. Remember to install git on the server before use. The installation of git can be downloaded directly from the git official website.
5. Installation dependencies
Take my project as an example, the dependencies that need to be installed are: node, npm, MongoDB
The installation of node and npm can be downloaded directly on the official website, and npm comes with node. After installing node, there will be npm. If you want to upgrade npm to the latest version, execute it directly:
npm upgradeThe installation of MongoDB is a bit more troublesome, if you install MongoDB under windows system, please refer to: Install MongoDB under windows (need to overturn the wall)
Other systems can install MongoDB on their own Baidu
6. Project packaging
So far our project has been uploaded to the remote server, and related dependencies have also been installed. The next step is to package the project code.
For the packaging of front-end projects, we generally use webpack. My front-end projects are created based on create-react-app, and the same goes for vue-cli.
First enter the project to install dependencies:
npm installThen execute the packaging command:
npm run buildAfter the packaging is complete, you can see a build folder in the file directory of the project . This is the static file we have packaged. When the user enters the domain name to visit our page, he needs to return the index.html file in this folder to user.
I wrote the backend based on koa2, and you use express or other frameworks. The backend is just running on the server. The principle of running the backend locally is the same. Here my command is:
npm install
npm run serveInstall dependencies first, then start the service
7. nginx configuration
When we develop locally, we generally use the setProxy.js file to help us forward to achieve cross-domain. We generally use nginx reverse proxy on the server to achieve cross-domain. Secondly, we need to use nginx to act as our front-end static file proxy server.
Nginx can be downloaded from the official website. After the download is complete, unzip the downloaded folder and open the nginx.conf file in the conf folder. The place we need to modify the configuration is:
server {
listen 80;
server_name 112.74.55.172;
location / {
root "C:\Users\Administrator\Desktop\code\sysu-competition-system\build";
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}First of all, listen to port 80 is no problem, because after we enter the domain name or server ip, port 80 is opened by default; server_name, if your server is bound to a domain name, then fill in your domain name here, such as sysyu-competition.top, if you don’t have one For binding domain names, fill in ip directly like I did, localtion / root below is the location of the static folder generated after you packaged the front-end in the previous step; index represents the entry file under the build folder, we don’t need to modify it, use the default Configuration, if your entry file is not index.html, then manually modify it yourself. The try_files configuration is mainly to prevent the front-end page from 404 when the user refreshes. The specific principle can be Baidu.
This configuration means that when the URL http://112.74.55.172 is entered, the root path is hit, the static file configured by root is returned to the browser, and the page is loaded. After the modification is completed, we enter in the nginx.exe folder directory:
nginx -tCheck the configuration file for syntax errors. If not, enter:
start nginxStart nginx to realize the proxy.
Every time you modify the nginx.conf file, enter:
taskkill /IM nginx.exe /FTo kill all nginx processes, and then enter the start command to start nginx, the configuration will take effect. At this time, enter your domain name (or server ip) and you should be able to see the front-end static page, but the front-end and back-end interfaces are not connected yet.
8. Alibaba Cloud server open port
We end run around the port in the firewall needs on the cloud Ali opened, as shown, the front end of my run, you need to port 80, the port at the back-end running on port 8000 safety - adding rules - Firewall turned on the two lower Port, any port you need to use, remember to open it here to access it. (If it is an ECS server, it is under the security group)
9. nginx solves the cross-domain problem of front and back ends
Our front-end and back-end projects run on different ports, and direct requests will cause cross-domain. We use nginx to realize the cross-domain problem of front-end and back-end communication. The specific configuration information is still in the nginx.conf file in the conf folder. Add the following lines of code:
server {
listen 80;
server_name 112.74.55.172;
location / {
root "C:\Users\Administrator\Desktop\code\sysu-competition-system\build";
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~/api/ {
proxy_pass http://0.0.0.0:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}The interface format of the request back-end in my front-end code is:
http://公网ip(域名):前端运行的端口/api/xxxxxOur front-end requests our own ip (domain name) and operating port, and there is no cross-domain. Then when nginx hits the request of ~/api/, it will proxy the request to the back-end running port 8000 according to the proxy_pass attribute; the hit rule of this ~/api/ is modified according to your request format, and the proxy port of proxy_pass is also based on Modify your back-end running port, then when the request is matched to /api/, it will hit the rules below and proxy to the remote server's local back-end running address, thus solving the cross-domain problem. So far, our front-end and back-end cross-domain solved.
Supplement: If your back-end service is set
Access-Control-Allow-Origin:'*'Solve the cross-domain problem of the front and back ends, then you can directly request in the front-end code
http://公网ip(域名):后端运行的端口/api/xxxxxEven without using nginx proxy, cross-domain can be achieved
10. The front-end requests third-party API cross-domain issues
In my project, the front end requested the third-party interface of the Gochuang Cloud platform to send the mobile phone verification code. In addition to requesting the back-end API in your project, there are also third-party APIs of Alibaba Cloud or other platforms that need to be requested, such as mine The specific request address of the third-party interface is:
http://hn216.api.yesapi.cn/?s=App.CDN.UploadOffice&app_key=............That is to say, we need to request to the domain name hn216.api.yesapi.cn. Directly requesting this domain name must be cross-domain. Then we can configure nginx to realize the proxy:
The front-end request is:
The requested domain name in the front-end code is 112.74.55.172 (that is, our server's public network ip), and the port is 80 (our front-end running port, modified according to your actual running port), so we request the same domain name and port number There is no cross-domain interface, and then nginx matches the /uploadToGuochuangyun/ request we initiated, and proxy_pass is used to proxy to hn216.api.yesapi.cn (the proxy rule removes uploadToGuochuangyun/) to achieve cross-domain, so far the third-party api Cross-domain is also solved.
So far, we have solved all the steps of deploying the front-end and back-end separation project on Alibaba Cloud lightweight application server. There are still many pits. If you encounter problems, you can always solve them by going to Baidu/google to check slowly. If you have any problems, please feel free to visit Leave a message in the comment area for discussion.