Have node back-end service project and VUE front-end service project in hand, but can only run in the local play, show yourself. Can’t you deploy them on a server and demonstrate them online for everyone to see?

Keep your mouth shut and play

The original blog

Preparing the server

The server

I use Huawei cloud server, alibaba Tencent cloud server process is roughly the same. This part of the point is cheap

Remote connection server test

Add a new inbound rule to the security group of the cloud server to view the security group name of the service areaExample Modify the inbound direction rule for a security group in a service area Add rule: add port 80 for nginx, port 3306 for database, port 22 for server, so use Navicat, Xshell, and browser to test whether the service is enabled.

Set up project operation environment

Mysql Database Installation

The official documentation explains how to install with the installation package, but I’m a bit stupid for not understanding it. Yum is a package management tool for centos, which is similar to NPM. The command is

// install yum install mysql mysql-server// Check whether RPM is successfully installed-qa| grep mysql / / start the mysql service. systemctlstart mysqld.service # start mysql
systemctl restart mysqld.service # restart mysql
systemctl stop mysqld.service # stop mysql
systemctl enable mysqld.service Set mysql to boot// Check the port usage3306
netstat -ntlp
Copy the code

If you want to create a new mysql user, you can use navicat to create a remote connection.

Nginx installation

// install nginx yum install nginx-qa| grep nginx / / start, shut down and restart nginx service nginxstartService nginx stop service nginx reload // You can also start nginx and set it to automatically run systemctlstartNginx. service systemctl enable nginx.service //80
netstat -ntlp
Copy the code

Enter your server address: service IP address in your browser Node Environment InstallationHere I use NVM to install Node so that it is easy to switch node versions later

Git - > install git-version// Select the directory where you want to install NVM, Choose to install this on my side bottom under/usr/local directory/usr/local/installation/NVM git clone git://github.com/creationix/nvm.git ~ / NVM / / view NVM version, install NVM success-v// Set the NVM to run automaticallyecho "source /usr/local/nvm/nvm.sh">> ~/.bashrc // change source ~/.bashrc // query the remote Node.js version NVMls-remote// Install node version NVM install V1213.0// Check the local Node version NVMls// Switch node version NVM use v12.13.0// Check node installation NPM-v
node -v

Copy the code

The required environment software is ready

Project deployment

The FTP client software FileZilla is available for free

Node Service Deployment

Find a place to create two folders, one for back-end projects and one for front-end projects. I’ll put it in the root directory

// Create a folder in the root directorycd~ mkdir service mkdir service/serve service/backups // One service one backup mkdir web mkdir web/dist web/backupsCopy the code

Use FileZilla to upload the back-end service to the server. Keep in mind that some files are not uploaded, such as node_modules, logs, etc. After uploading, test whether it can run normally. The test process is the same as local service test

The Node service starts automatically upon startup

Pm2 Pm2 is a process manager for Node applications with load balancing function. PM2 is perfect when you want to put your stand-alone code on all cpus on all servers and keep the process alive forever with a 0 second reload.

// Install NPM I-gPm2 // Modify an execution command in the node project package.json, if not add //... This means to start the service, named koaServer, and automatically restart the application when the file changes"prd": "pm2 start bin/www --name=koaServer --watch",
// ...

Create a boot autostart command
pm2 startup                     
Copy the code

Then the Node service can start automatically on the server. Test whether the service is successful by typing: IP: port number in the browser. If any data is returned, the service started successfully, as shown below

Vue service deployment

For the front-end project, build a package and upload the dist file to the server using FileZilla. In my case, it is /root/web/dist

Nginx configuration

In /usr/nginx, there is an nginx.conf file. If you don’t know where the configuration file is, you can use the command whereis nginx to see what all the nginx-related folders are.

// Open configuration vim nginx.conf press I to enter editing modeCopy the code
// Modify the server part of the configuration, of course, you can also baidu server {listen80 default_server; # service port
        listen       [::]:80 default_server;
        server_name  _; # domain name address, set when using the domain name to open web pages
        # root /root/project/web/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            root    /root/web/dist; The front-end page address for deployment
            index   index.html;
        }

        error_page 404 /404.html;
        location = /40x.html {
            root   /usr/share/nginx/html; # Original 40x page
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html; # Original 50x page}}Copy the code

Press ecs + :wq to save the configuration and exit

Service nginx restart // Check the status of the port80,3306Netstat is enabled on all ports-ntlp
Copy the code

So that’s pretty much it. Type in elastic public IP in your browser. If 403 page is displayed, you need to modify the nginx configuration

Go to the first line: user nginx and change it to user root

Save and exit, restart nginx, if the page is still 403, then check again, I can access the page after modifying user root

If you jump out of the page, like this. Check whether the back-end interface is also available.At this point, our project will run smoothly on the server, and then apply for a domain name, it will become a real website.

conclusion

The whole process is summarized as follows:

  1. Server configuration (Linux system is installed if you rent a cloud server)
  2. Database, back-end environment installation, NGINx installation (if you do not use the database, do not install, fewer steps)
  3. Front-end and back-end project deployment
  4. Database, Nginx, backend services startup Settings
  5. Nginx configuration
  6. Browser opening test

The process is not difficult, but it takes time, especially if you are not familiar with Linux, SQL, etc.

After deployment, there is a feeling of opening the door of the new world. You can show your case, also can start to create a blog site that belongs to your own, but also can give yourself when the cloud disk, how to use it depends on your play.

About the cloud server: remember to turn it off when you’re done, so you can save money. If you want to subcontract the annual/monthly package, you can buy it when the event is held. I saw the Women’s Day event a few days ago, and it was 1,500 yuan for three years, and 2,700 yuan for three years after the event, which nearly doubled.

Ok, to this, if there is any error in the middle or do not know you can comment on the message, or their own Baidu to find the answer.