Ubuntu+Vue+Node+Express+Mysql+Nginx

More hands on blog development finally finished, the rest is the project launch, although before the project to do more or less of a project of contact line, also contact with Linux environment, but the real online project from scratch, it is the first time, but eventually is successful, in this special records, the project released time, The holes that the vegetable chickens step in.

1. Preparation for launch

Before going online, we need to sort out the things needed to go online to the server. Because the front-end of the blogger is Vue, the background is Node.js, and the database is Mysql, the preliminary preparations need to be made after the sorting are as follows:

1. For one cloud server, it is too expensive and unstable to build the server with hardware. The most difficult thing to solve is that there is no public IP and Intranet penetration, so we give up 2. The domain name that has been put on record is a 3.Linux system, which uses Ubuntu16.0 4 of ali cloud. Install node.js and NPM package manager. 5. Install Mysql database 6. Install NginxCopy the code

2. Configure the server

Bloggers used here is a student of ali cloud machine, not to advertise ali cloud, is also very cost-effective, student discount less than ten dollars a month, a flower bai installment buying points and 12 months of the year, reimbursement is approximately equal to white, but bought not bloggers will regret for a long time, because when a double tenth cheaper, after the success of the purchase will be pre-installed system well, Therefore, the step of installing the system is avoided. If you want to learn the installation of Linux system, you can toss Vmware casually. Moreover, cloud server has another advantage that even if the toss collapsed, you can directly restore the hard disk in the console, and then restore the original appearance to toss again. After the server is purchased, it does not mean that it can be used directly. We also need to do some simple configuration for it.

2.1. Open the server port

As is known to all, many services occupy corresponding network ports. For example, mysql occupies port 3306 by default, and this is also the case on our server. If these ports are not open for access, services cannot run normally or remote access is impossible.

When purchasing a server, port 3389, -1/-1, and 22/22 are enabled by default. Port 22 is used to remotely log in to the server and must be enabled. Then log in to ali Cloud console, select the purchased server, and enter the security group to configure other ports. Note that the ports are configured in the inbound direction. The main ports to be opened are as follows:

1.3000 port: Node.js service listening port 2.3306 port :Mysql service listening port 3.80 port :Nginx service default listening portCopy the code

2.2. Modified the Ubuntu16.0 download source

Because the ubuntu default software to download the source in the United States, so the download is very slow, usually adopt the method of change to download the source to solve this problem, although ali cloud server’s default download source is source of ali, but sometimes also can appear can’t find the package download failure problem, so the blogger download source changes to the source of tsinghua university. /etc/apt/source.list is a simple file to modify.

1. Access the /etc/apt folder

cd /etc/apt
Copy the code

2. Modify the source.list file in vim

sudo vim sources.list
Copy the code

3. Comment out the rest of sources.list

1. Press 'I' to enter the edit mode. 2. deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial main restricted deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates main restricted deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial universe deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates universe deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-backports main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security main restricted deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security universe deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security multiverse 3. Press 'Esc' to exit editing mode 4. Enter ':wq' to save the configuration and exitCopy the code

5. Update the apt

sudo apt-get update
Copy the code

Installed 2.3.`node.js`The environment

1. Install the Node. js environment

sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
Copy the code

2. Replace the Taobao image for the NPM package manager

sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list
Copy the code

3. Install n manager globally (used to manage node.js versions)

sudo npm install n -g
Copy the code

4. Install the latest node.js version

sudo n stable
sudo node -v
Copy the code

Installed 2.4.`Mysql`

1. Run the following command:

Sudo apt get install mysql-server sudo apt install mysql-cilent sudo apt install libmysqlcilent-devCopy the code

2. Check whether the installation is successful

sudo netstat-tap | grep mysql
Copy the code

If the following page is displayed, the installation is successful

Mysql

mysql -uroot -ppassword
Copy the code

4. Set remote access to mysql

cd/etc/mysql.conf. d sudo vim mysqld. CNFbind-address=127.0.0.1 One line is requiredCopy the code

3
mysql

grant all on *.* to root@The '%' identified by 'password' with grant option
flush privileges
Copy the code

6. Use exit to exit the mysql service and restart the mysql service

service mysql restart
Copy the code

7. Then you can connect to Mysql of cloud server through visualization software

Installed 2.5.`nginx`

Here the blogger is using a simple installation method, did not use the source code installation method, figure a convenient

1. Run the installation command

sudo apt-get install nginx
Copy the code

After the Ubuntn installation, the nginx file structure looks like this:

Configuration file:/usr/sbin/nginx
Log file:/var/log/nginx
Default startup script:/etc/init.d/nginx.conf
Default virtual host:/var/www/nginx-defalut

2. Start default nginx

sudo /etc/init.d/nginx start
Copy the code

If the nginx welcome page appears, the installation is successful

2.6. Install the pm2

Pm2 is a process manager developed based on Node, suitable for background resident script management

npm install pm2 -g
Copy the code

Installed 2.7.`rz/sz`

Install to upload local files to the server

sudo apt-get install lrzsz
Copy the code

Installed 2.8.`unzip`

Install the ZIP decompression software

sudo apt-get install unzip
Copy the code

At this point, the basic configuration of our server is done, and then the project is officially online

3. Package and upload front-end projects

1. Create a front-end project directory

mkdir /data/my_blog/front-end
Copy the code

2. Package local VUE projects

Go to the local vue project root directory and run: NPM run build. Then go to the dist folder and compress the entire contents into zip formatCopy the code

3. Access the front-end project directory of the server and upload the project

cd/data/my_blog/front-end rz Select the compressed package and decompress unzip dist. Zip to view the files in the current directory, run the ll commandCopy the code

4. Migrate the local database

The main goal of this project is to create a database on the server exactly as it is locally

1. Log in to Navicat, select the local blog database, and export it as SQL file 2. Use this software to connect to a remote database and create a database with the same name, CREATE Database Blog 3. Select the created database and execute the SQL file you just created. OK, done

5. Packaging and uploading of back-end projects

1. Go to the root directory of the local back-end project, package all files except the dependent folder, and compress them into ZIP format 2. Create a back-end project directory on the server

mkdir /data/my_blog/back-end
Copy the code

3. Go to the directory, upload and decompress the project

cd/data/my_blog/back-end rz Select the compressed file unzip name.zipCopy the code

4. Dependencies of the installation project

npm install
Copy the code

5. Run the Node project using PM2

Pm2 start bin/WWW here, be sure to use the right way, don't use pm2 start app. Js, otherwise unable to listening to port 3000, don't ask me why, I am looking for this bug for half an hour, after the success of the operation will show ` pm2 ` currently running servicesCopy the code

node.js
mysql
time_out
node
PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR
time_out
30
24

/* database configuration file */ const mysql = require('mysql');

const mysqlConf = {
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'name',
    multipleStatements: true} // Used to save database connection instancesletdataBase = null; // Set the timerletpingInterval; // Reconnect if the data connection failsfunctionhandleError(err){ logger.info(err.stack || err); connect(); } // Establish a connection to the databasefunction connect() {
    if(dataBase ! == null){ dataBase.destroy(); dataBase = null; } dataBase = mysql.createConnection(mysqlConf); dataBase.connect((err) => {if (err) {
            logger.info("err conncetion to database",err);
            setTimeout(connect, 1500); }}); dataBase.on("error",handleError); // Ping the database every hour to maintain the database connection status clearInterval(pingInterval); pingInterval =setInterval(() => {
        console.log('ping database');
        dataBase.ping((err) => {
            if(err){
                console.log('ping err'+ JSON.stringify(err)); }}); }, 3600000); } // call the connect function connect(); module.exports = dataBase;Copy the code

6.`nginx`configuration

1. Modify the nginx configuration file

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

2. Modify the configuration file to :(the blogger’s configuration file is posted here for reference only)

Add a server to HTTP# server configuration
        server {
                listen          80 default_server;
                listen          [::]:80 default_server;
                server_name     blog.bestbven.top;
                root            /usr/share/nginx/html;



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



                location / {
                        root /data/my_blog/front-end; # front-end project address
                        index index.html; # default search
                        try_files $uri $uri/ /index.html; # a pit, later} the location/API / {proxy_pass http://116.62.163.180:3000/;# listening proxy}}Copy the code

3. Save the corresponding file and re-read the nginx configuration

nginx -sReload or nginx -c /etc/nginx/nginx.conf, 80 May be occupied by the port. The solution is as follows: Error: nginx: [emerg] a duplicate default serverfor/etc/nginx/sites-available/default: /etc/nginx/sites-available/default: /etc/nginx/sites-available/default: /etc/nginx/sites-available/default: Netstat -tunlp Check the port usage. Find the process that occupies port 80, remember its process number, and thenkill-9 Process number to kill him, then restart nginxCopy the code

4. The nginx proxy_pass now, have set up to allow access to http://192.168.1.1/api/getTest First:

Location/API / {proxy_pass http://127.0.0.1/; } URL: http://127.0.0.1/getTestCopy the code

Second:

Location/API / {proxy_pass http://127.0.0.1; } URL: http://127.0.0.1/api/getTestCopy the code

Third:

Location/API / {proxy_pass http://127.0.0.1/test/; } URL: http://127.0.0.1/test/getTest
Copy the code

Fourth:

Location/API / {proxy_pass http://127.0.0.1/test; } URL: http://127.0.0.1/testgetTestCopy the code

At that time, the blogger could not proxy port 3000 and was stuck for a long time. Finally, Google found out that the configuration of proxy_pass was wrong. 5

Vue single page start page is index.html file, route does not actually exist, so there will be page refresh 404 problem, need to set access vue page map to index.html.

1. Pack static resources and set the absolute path config/index.js

nginx

See above where nginx configuration says the pitCopy the code

7. Domain name resolution

In fact, to this place, our blog website is already accessible, but we use the IP address of the server to access, so we still need the last step, and we are done

Enter the domain name console of Aliyun. 2. Select a registered domain name and resolve it. 3. Add record 4. Select record type A because our domain name resolves to an IPV4 address 5. The host records the 'blog' entered by the blogger, that is, the first-level domain name 'bestven. Top' is resolved to the second-level domain name 'blog.bestven. Top' pointing to the server IPV4 address 6. Record Value Enter the IPV4 address of the server. 7. Click SaveCopy the code

OK, all the posts are finished and can be accessed normally. It took the blogger eight hours to crawl out of the pit. There is a long way to go

1. Preparation for launch

2. Configure the server

2.1. Open the server port

2.2. Modified the Ubuntu16.0 download source

Installed 2.3.node.jsThe environment

Installed 2.4.Mysql

Installed 2.5.nginx

2.6. Install the pm2

Installed 2.7.rz/sz

Installed 2.8.unzip

3. Package and upload front-end projects

4. Migrate the local database

5. Packaging and uploading of back-end projects

6.nginxconfiguration

7. Domain name resolution

Related Posts

Front-end engineering workflow specification

What’s your Spring Festival like? Let’s share with animation — online experience and emoticon support

Two lines of code add interactive animations to the site