Build a personal website from 0 to 1 (small white version)

Time:2021-7-13

If a worker wants to do a good job, he must sharpen his tools first

Let’s first sort out what we need to prepare for the simple construction of the station.

  • One server.
  • A domain name of your own.
  • Code and time. The technology stack we choose here is Vue + node. JS + nginx + mongodb( Why choose these? Because only these o (╥﹏╥ o)

Alibaba Tencent can buy it for the first time

Personal recommendation of lightweight application server, the first purchase or student certification is only about 100 yuan a year. If you are not familiar with the Linux command, you can buy the Windows version directly. The specific login method and service provider will also have detailed documents, so I won’t repeat them one by one.
image.png

The official document of domain name filing and resolution is very clear

Baidu domain name registration, ordinary domain name every year a few yuan to dozens of yuan. After purchasing a domain name, we also need to record and DNS resolution.

  • Filing: according to the requirements of network security supervision, it is necessary to upload the authentication information such as personal certificates and the basic information of the website, which can only be used after being approved. The specific requirements and process of filing will have detailed documents on the official website of the domain name registration service provider, and there will be telephone communication for information confirmation during the filing process, so this step is relatively simple.
  • DNS resolution: the resolution here is to go to the domain name control center to manually configure and “bind” the IP address of the server with the domain name.
    image.png

Local code flying up, multi interruption, multi debugging

Don’t explain more about the basic usage of node and mongodb. Each of these can be taken out and studied separately. The key point here is how to link and cooperate between the front and back ends and databases during the local development of the whole station.

1. Server

The server adopts express framework based on node.js. The specific steps are as follows.

  • First, create a new folder, enter the file NPM init, and initialize a package. JSON.
  • Download express.npm install express --save-dev
  • Create a new server.js. Note that the port here can be customized. Let’s define it as 9527 for the time being, which will be mentioned later.
const express = require('express')
const app = express()
app.listen(9527, () => {
    Console.log ("service started successfully"); 
})
  • Turn on the service. CMD to execute the command linenode server

2. Front end

NPM run is the end of front-end development.

3. Database

Mongodb is used as the database. The specific usage is as follows.

  • Download and install mongodb.
  • Start the database.Mongod -- dbpath C: (Mongo (location)

4. Front end server

As mentioned in the introduction of the server above, custom ports are used for service startup. In order to solve cross domain problems, agents will be set during the development of front-end projects. Here, the ports of agents can be set to be consistent.

proxy:{
    "/":{
        target:"http://127.0.0.1:9527",
        changeOrigin:true,
    }
}

5. Server database

  • Download the mongodb package.npm i mongodb --save-s
  • introduce.
const mongodb = require("mongodb");
const mongoClient = mongodb.MongoClient;
  • Create a link.
mongoClient.connect(" mongodb://127.0.0.1: Port number ", function (err, client){
    if(err){
        Console.log ("database connection failed");
    }else{
        Console.log ("database connection successful");
        Const DB = client.db ("database name");
        cb(db);
    }
})

At this point, the local development can be started, and after the business is completed, it can be uploaded to the server (online).

Package configuration without loss

1. Server environment configuration

  • Install node.js and install the stable version on the official website.
  • Install nginx and install the stable version on the official website.
  • Install mongodb and install the personal version on the official website.
  • It is recommended to install a lightweight text editor, such as Notepad + +.

2. Local packaging

  • After NPM run build of Vue project, copy dist file to nginx folder of server.
  • Upload the server file to the server.

3. Service on

  • The opening mode of server is the same as that of local development, and the command is node server.
  • The database is opened in the same way as the local development, mongod — dbpath path.
  • The front-end resource can wait for nginx agent.

4. Nginx configuration

Configure in nginx.conig in nginx file.

server {
        listen       80;
        server_ Name your domain name;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            The root front-end root directory points to the dist package;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        #Proxy node service
        location ^~/api/ {
            proxy_pass       http://127.0.0.1:21;
            proxy_set_header Host      $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    error_page   500 502 503 504  /50x.html;
	}
    }

5. Nginx start

cmd nginx -s reload

Finally, go to the address bar and enter your own domain name to test it~

You are welcome to point out the shortcomings and discuss them.

Thank you!