The React project is deployed on Alibaba Cloud server ECS

This article describes how to start from the first step until the browser can access your React project through IP.

1. Compile your React project

My project is created through create-react-app scaffolding. When the project is written, the build script below package.json can be executed:

npm run build

Note that if you want the packaged file generated after packaging to only be accessible in the project root directory, we need to add a line of code "homepage": "." to package.json to set the homepage of the project.

package.json

...
"version": "0.1.0",
"private": true,
"homepage": ".",
...
After the build is complete, you will find that there is an additional build folder in the root directory of the project. This is the file we need to deploy to the server later.

2. Server configuration

2.1 Purchase Alibaba Cloud Server

Next, you need to complete some server-side configurations. Of course, the first step is to purchase Alibaba Cloud Server ECS.

2.2 Install Nginx server software

Next, it is recommended to use XShell or Putty to remotely log in to the Alibaba Cloud server.

Then we need to install Nginx on the server, mine is centos environment, as follows:

// 1. Download ngin dependencies
wget http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 2. Install dependencies
rpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 3. Install nginx
yum install nginx
// 4. Start and start automatically
systemctl start nginx.service
systemctl enable nginx.service
If it is an ubuntu system, refer to here: Installation method

Finally, when you enter your server public IP in the browser, you can see the Nginx welcome interface.

2.3 Upload build folder

After that you can upload your build folder to your cloud server.

2.4 Modify Nginx configuration file

Then we need to modify the configuration file so that the index.html file of React can be browsed directly when the server IP is accessed externally.

First find the location of the nginx configuration file through this command:

nginx -t

My return result is as follows:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Enter this directory, there are two key files/folders

nginx.conf, which is a main configuration file

conf.d, this is a folder that contains the server's independent configuration files
So open conf.d and create a server configuration file builder.conf in it (prefix yourself):

server {
listen 80;
server_name 47.98.xxx.xxx; (your own server IP)

location / {
root /usr/project/webbuilder/build;
index index.html index.htm;
}
}

After configuration, reload the nginx configuration

nginx -s reload
systemctl stop nginx
systemctl start nginx

3. Try to access

Then you can try to use a browser to access your project from the public network. If everything is normal, it should be fine. So far everything is ok~

4. Security group settings

If you cannot access it, it is likely that there is a problem with the security group settings of your cloud server. Access to port 80 from the external network is prohibited. You can go to the console-network and security-security group-configuration rules and add a new rule. up.