Project introduction
Recently, I took over a friend’s project and needed to build a navigation website, which also supported some functions such as user login custom navigation page, so I used the React framework, nodeJS Express framework and mysql to build a website. However, I encountered many problems during the deployment, because it was the first time to build an online environment. Here is a record of their deployment process, as well as the pits.
- Buy a cloud server and log in
Ali cloud server is used here, Linux system, CentOS 7, remote connection tool is the cloud server with Workbench remote connection, of course, you can also use Xshell or local CMD remote connection tool, file upload is Xftp.
- Build mysql environment
Use the yum command that comes with CentOS7 to install
# yum install mariadb-server mariadb # yum install mariadb-server mariadb # yum install mariadb-server mariadbCopy the codemysql -u root -p -- If the initial password is empty, press Enter
mysql> set password for 'root'@'localhost' =password('Your password'); -- Set the database password
Copy the codeDefault-character-set =utf8 # mysql /etc/my.cnf # mysql /etc/my.cnf # mysql /etc/my.cnfCopy the codeAssign all privileges on all tables in all databases to root at all IP addresses
mysql> grant all privileges on *.* to root@The '%'identified by 'password';
Copy the codeNext, use Navicate12 to implement the remote connection to the database
At this point, the database can be remotely controlled locally to import data and other operations.
3. Set up the Nodejs environment
Download the nodeJS compressed package from nodeJS official website, find the version of the cloud server system, and then use XFTP to put the package in the root directory of the cloud server
Tar -xvf node-v12.4.0-linux-x64.tar.xz # Decompress the node. js installation package mv node-v12.4.0-linux-x64/ /usr/local/node # rename the node. js installation directory#Add the node.js executable directory to the system environment variableEcho "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile source /etc/profile # Enable the node. js environment variable to take effect immediately.#View the node and NPM versions
node -v
npm -v
Copy the codeAt this point, the nodeJS background environment is set up. Next, put all the node background project files into the server folder, pay attention to the node_modules folder do not copy, and then on the server console CD to the server directory, NPM install to install the related dependency packages. The script command in the package.json file of the Node project is as follows:
"scripts": {
"start": "node ./bin/www"."test": "echo \"Error: no test specified\" && exit 1"
},
Copy the code/bin/ WWW or NPM start in the server directory to execute the daemon, but if you close the command window, then the daemon will stop running, so you need to download pM2 daemon
yum install -y pm2
Copy the codeYou can then see the script command in the package.json file as follows:
"scripts": {
"start": "node ./bin/www"."prd": "pm2 start ./bin/www"."test": "echo \"Error: no test specified\" && exit 1"
},
Copy the codeThe corresponding PRD command is as follows:
pm2 start ./bin/www --watch
Copy the code–watch is used to monitor the changes of back-end projects and dynamically update the back-end program. Check the pm2 list command and find that status is online. At this point, the back-end project deployment completes the common PM2 commands:
$pm2 start app.js --name=" API "--name=" API Automatically restart application when file changes $pm2 start script.sh # Start bash script $pm2 list # List of all applications pm2 started $pm2 monit # Show CPU and memory usage of each application $pm2 $pm2 logs [app-name] $pm2 logs [app-name] # Flush $pm2 $pm2 stop 0 $pm2 restart all applications $pm2 reload all applications in cluster mode $pm2 delete all $pm2 delete 0 $pm2 startup $pm2 saveCopy the code- Nginx hosted the front end
First check whether GCC is installed on the server
Yum list installed | grep "GCC" # can be imported in any directoryCopy the codeIf the following figure appears, GCC is installed
Yum -y install GCC # yum -y install GCC pcre-devel zlib-devel openssl openssl-devel # yum -y install GCC pcre-devel zlib-devel openssl-devel # https://nginx.org/download/nginx-1.16.1.tar.gz # download nginx install package tar - ZXVF nginx - 1.16.1. Tar. Gz # decompression, /configure --prefix=/usr/local/nginx # make make install # Enter CD /usr/local/nginx/sbin Nginx -t # check whether the installation was successfulCopy the code
If the following information is displayed, the installation is successful
- Start the niginx
CD /usr/local/nginx/sbin to the current directory
#. / nginx start nginx netstat tunpl | grep nginx # see if nginx start successCopy the code
- Stop and restart nginx
CD /usr/local/nginx/sbin to the current directory
/nginx -s stop #Copy the code/ / second, first netstat tunpl | grep nginx process check 80 port number, Then use the kill command to kill the process netstat tunpl | grep nginx kill 9 'process of port 80, / / the last in the input netstat tunpl | grep nginx, confirm the port 80 were killed. netstat -tunpl|grep nginxCopy the code/nginx -s reload #Copy the code- Nginx starts automatically upon startup
Vim/etc/rc. D/rc. Local use vim command to open the corresponding file input I into Linux file input mode In the corresponding position to add the following path/usr/local/nginx/sbin/nginx press ese withdrew from the input mode, input: wq save and exit
- Configure nginx
CD /usr/local/nginx/conf Go to the vim nginx.conf directory to access the file
user root; # set nginx startup user and system user to be consistent to prevent 403 worker_processes 1#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; # Enable gzip compression, can greatly improve the site access speed gzip on; gzip_min_length 1k; #gzip_disable "msie8"; # gzip_vary on; # gzip_proxied any; gzip_comp_level 4; gzip_buffers 4 16; Gzip_http_version 1.1; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; Listen 80; Server_name www.tik128.com; Root/root/www; # project file root directory index index. HTML; #charset koi8-r; #access_log logs/host.access.log main; location ~^/favicon\.ico$ { root /root/www; } location / { try_files $uri $uri/ /index.html; } # important configuration item #error_page 404/404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php${# proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php${# root HTML; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #}}Copy the codeSave and restart nginx after the modification is complete
Explains parameters related to nginx configuration files
server: server is a listening configuration for a port, which can have multiple location route configurations. A server is a large unit. You can copy multiple servers to listen on different ports or different domain names on the same port (server_name)server_name: Specifies the listening host name. It can be a domain name. For example, aaA.dongzhongwei.com and bbB.dongzhongwei.com both use port 80, but they can be distinguished by server_name.listen: Listens on port 80client_max_body_size: Maximum attachment upload capacity. The default value is 1M. If it exceeds the limit, 413 attachment is too big error is reported. (This configuration seems to be written in the location.)location: Listens for routes under ports. / is the listening root pathlocation.proxy_pass: Indicates the forwarding path. Forward 127.0.0.1:80/ to localhost:6606/. Or forward to localhost:8080/testabc for example, 127.0.0.1:80/testlocation.proxy_redirect: Indicates whether to forward. Off no
Location Configuration rule (priority)
(localtion =) > (localtion complete URL) > (localtion ^~) > (localtion ~,~*) > (LCOALtion partial start path) > (/) = Exact match ^~ Indicates the start of the specified path ~ For case sensitive regular matches ~* for case insensitive regular matches/general matches, all urls start with this ex: The location ^ ~ / static/rules # {1} the location ~ \. (GIF | JPG | PNG | js | CSS) ${2} # rules the location ~ * \. PNG ${2} # rules / / http://xdh.com/static/a.png priority to match rule 1, does not match the back of the matching rules / / http://xdh.com/a.png to rule 2Copy the codeAfter the nginx configuration is complete, the react project files in the local development environment are packaged with webpack, and the files in the dist directory are copied to the /root/www folder. Then you can access the files by domain name
To access by domain name, you also need to configure the open port in the security group of Aliyun and resolve the domain name of the server IP address, as follows:
Configuring security group ports:
Domain name resolution, then you can use the domain name to access the server
Finally, attach the project’s url, tik128.com