How to deploy a front-end project to a remote server from scratch

The background of writing this article

We use CentOS7 server here, the whole process of deployment is relatively smooth, there is no pit, if you do not have their own independent deployment of front-end project partners can first collect, convenient for their next deployment of the project query ha.

Here’s the background: I did a small React project for a friend, and then needed to deploy it to a server for others to access. My friend bought a Tencent cloud server and asked me to quickly deploy it on it. However, I only have a Windows OS 10 game book at hand now. I have not deployed projects on Windows system before, so THIS time I will simply study and see how to do it. For students who don’t have a server but want to deploy a project, they can go to Tencent cloud or Ali Cloud and buy one. If they are students, they can buy a domain name for about 100 yuan a year, and then they can access the server by domain name after resolving the domain name to the corresponding IP address of the server.

PS: How to buy a server here will not say ha, you can go to Tencent Cloud/Ali cloud official website to buy, buy will get an IP address and password, and then use this machine to connect to the remote server, let’s say this step.

XShell panel – Better use of Windows console

Here we will talk about how to use Windows to do the configuration, if the MacOS, directly use the system’s own command line to connect to the remote server. Those of you using MacOS can skip the Xshell chapter and check out my other article on configuring the Basic Development environment for the Mac front end from scratch

SSH root@ip address of the remote server #Copy the code

We have to be able to connect to a remote server before we deploy the project, right? On Windows, we have a lot of ways to connect to a remote server. One of the tools I use is Xshell.

After clicking on the free license page, all we have to do is fill in our name and email address, which will receive a link to download it and use it.

Open it after downloading it. Click Create, then enter the IP address of the server, and click OK

After clicking ok, we can see that the newly created server will appear in the session manager on the left. After double-clicking it, we can see the login interface. First enter the login user name, and generally the initial user name of the server is root

After entering the user name, you can see an interface where you can use the password to log in or the key to log in. Because my friend gave me a key, I chose to log in with the key. After saving the key locally, I click Browse to open the key, and then enter the server password.

After typing, click OK and see if the connection to the server was successful. Seeing a line like this indicates that the connection is successful, and we are ready to operate on the server.

Installation environment

After entering the server, we first need to set up our server environment

Install git

Yum -y install gitCopy the code

A Complete! The installation is successful.

Checking the Git Version

git --version
Copy the code

Initialize the git

Once git is installed, initialize it. When using Git for the first time, we need to configure git user name and email. The user and email can use github or gitLab repository account

Configuring a User Name

git config --global user.name "Username"Copy the codeCopy the code

Configure your email

git config --global user.email "Email address"Copy the codeCopy the code

Once this is configured, we can type in and see all of our configuration information, and then see if user.name and user.email are configured correctly

git config -l
Copy the code

Download the Node.js environment

Here we use NVM (Node version Management tool) to install Node. First we download NVM and enter the following command

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashCopy the code

or

Wget - qO - https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashCopy the code

Git clone to /root/. NVM

If a download error occurs, it is probably due to a slow download speed that prevents you from pulling your project from Git

The solution is to adjust the speed limit and try again by typing the following command from the command line

git config --global ssh.lowSpeedLimit 0
Copy the code

git config --global ssh.lowSpeedTime 999999
Copy the code

Then execute the command to download the NVM and see that it has been downloaded successfully

If you run NVM -v and command not found is displayed,

Shut down the current console, open a new one and try again, or execute one of the following three commands, such as bash in this case, and then execute NVM -v to display the version number and use NVM

source ~/.bashrc
Copy the code

We can then execute the following command to see all the node versions. Just select the latest version to download. The latest version of Our node is V16.3.0

nvm ls-remote
Copy the code

And then execute

NVM install v16.3.0Copy the code

At this point, our Node is installed successfully

Deploy the front-end project -Nginx

Install nginx

Yum -y install nginxCopy the code

A Complete! Then the installation was successful

Test the nginx configuration and view the file location

nginx -t
Copy the code

Create a folder with static resources for your own projects

mkdir /www
Copy the code

The root folder contains configuration files such as NVM or git, and etc contains configuration files such as nginx

CD/Go to the server root directory ls -a to view all files in the current directoryCopy the code

Next we will go to the WWW directory and pull down our git project and execute the following command

Git clone CD WWW git clone CD git clone NPM install # NPM install - registry=https://registry.npm.taobao.org USES CNPM install NPM run the build # I used here is yarnCopy the code

After the project resources are configured, you can open nginx to configure the static resource server. Enter the following command to enable nginx configuration

vim /etc/nginx/nginx.conf
Copy the code

Enter vim to enter the file, press I to enter INSERT mode, press ESC to exit the input mode, then enter :wq to save and exit, and then enter the following command on the command line to restart the nginx service

nginx -s reload
Copy the code

Here’s the basic configuration, port number we’ll use the default port number 80

server {
        listen 80;  # 端口号
        server_name localhost; # 有域名就填域名，没有就填ip地址或者本机

        include /etc/nginx/default.d/*.conf;

    	location / {
        root /www/项目目录/build;   # 打包后的文件目录
        index index.html index.htm;
        try_files $uri $uri/ @router;  # 开启了browserRouter模式就写这个
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
	}
Copy the code

Once configured, restart Nginx and enter your IP address in the browser to access the project

Ports and firewalls

Firewalld firewall is installed on CentOS7 by default. If the firewall is enabled, you need to manually open the port number

Check whether the firewall is enabled

systemctl status firewalld
Copy the code

Enabling the Firewall

systemctl start firewalld 
Copy the code

Disabling the Firewall

systemctl stop firewalld
Copy the code

The firewall starts automatically upon startup

systemctl enable firewalld
Copy the code

Stop and disable the firewall

sytemctl disable firewalld
Copy the code

Restarting the Firewall

firewall-cmd --reload
Copy the code

View open ports

netstat -anp
Copy the code

Check whether the specified port is enabled – if the firewall is enabled first

firewall-cmd --query-port=9090/tcp
Copy the code

Port number open to the public

Firewall-cmd --add-port=123/ TCP --permanent # permanent indicates that the port is permanently open. If this parameter is not used, the port will be disabled after restartCopy the code

Close the open port number

firewall-cmd --permanent --remove-port=9090/tcp
Copy the code

conclusion

Well, today is the first record here, after this configuration, I have more understanding of Linux instructions and front-end projects, in this record of the deployment process. In addition, it would be more convenient to use Docker for deployment (although I haven’t learned it yet, I will learn it when I have time). Convenient for their own future query also hope to bring help to some of the partners who have never deployed their own front-end projects.