Website online deployment of courses

Deployment project questions:

  • How do users access our developed website?
  • How did our project go online after it was developed?
  • During the actual development process, do the front-end programmers do the work of bringing the project online?

First, the website operation mechanism

1. Noun explanation

The domain name

  • www.baidu.com
  • www.taobao.com
  • www.qq.com

A domain name, commonly known as a web address, is a string of dotted names used to identify computers on the Internet.

Originally used to identify the IP address used by computers on the Internet, but IP addresses are not easy to remember, so people designed easy to remember domain names, and then through THE DNS domain name and IP address association, so that people can directly access the corresponding computer through the memory of the domain name.

The DNS server

The Domain Name System (DNS) is a service on the Internet that translates a Domain Name into an IP address.

You can think of it as a dictionary, which stores the key-value pairs of domain names and IP addresses.

Local hosts file

windows: c:\windows\system32\drivers\etc\hosts

mac: /etc/hosts

The server

A server is actually a computer, but it is not a computer that we use everyday, like our own PC, but one that provides some Internet service.

For example, web server can provide web services for us, email server can provide E-mail services for us, FTP server can provide file storage services for us and so on.

Install different service applications on your computer to provide the corresponding services.

Common Web services applications: Apache, Nginx, IIS, Node.js

2. Website request Process (simplified version)

A static page

The web page only requests and responds to simple HTML, CSS, and JavaScript files without any data communication with the server. Such pages are called static pages.

Dynamic pages

Pages that communicate with the server are called dynamic pages.

A page with separate front and back ends

In projects with separate front and back ends, data rendering in the page is done in the browser.

The separated front – and back-end page request is divided into two parts: static page request + Ajax data request

The front and back ends of the page are not separated

In a project where the front and back ends are not separated, data rendering on the page is done on the server side.

Pages that are not separated from the front and back end can be completed in a single request.

Ii. Website online deployment process

1. Purchase a server

Domestic servers: Elastic Compute Service (ECS) of Alibaba Cloud and Cloud Virtual Machine (CVM) of Tencent Cloud

Foreign servers: Japanese Vultr, American Linode, Google Cloud, Microsoft Azure, Amazon AWS, etc

In this step, you need to create a server instance and assign an external IP address.

2. Domain name purchase

Domestic: Wanwang (Ali), Tencent, etc

Abroad: go

3. Domain name resolution (configuring DNS)

After registering the domain name, map the domain name to the IP address corresponding to your server, so that others can access our server through the domain name.

This step is called domain name resolution, and it can be done through the background provided by the domain name service provider. Usually domain name resolution is delayed and does not take effect immediately.

4. Set up the server environment

Configure the server, Mac system directly with the terminal is OK

Git bash for Windows

Linux operation commands to be used

#Remote connection commandSSH root @ the domain name
#Displays the current folder path
pwd

#Switching folder directoriesCD Directory Path
#Displays the contents of the current folder
ls

#Edit the fileVim file path
#Transfer filesSCP Local file path root@ Domain name: remote path
#Unzip file command
unzip 
Copy the code

4.1 Installing CentOS developer packages

yum groupinstall 'Development tools'
Copy the code

####4.2 Configuring encrypted Login

#Generate a local key pair on your computer
ssh-keygen -t rsa 

#Generated position
#MAC in ~ /. SSH
#Windows in C:\users\ your username \.ssh

#A.ssh folder is created on the server
mkdir .ssh

#Switch to this folder
cd .ssh

#A file is created
touch authorized_keys

#We put the contents of the id_Rsa. pub file on our computer into the authorized_keys fileecho "cqHuvyGI2EXH5EOT/wsjIlNqH6kRaGRzLOcYAoYyn+0nsPhEfFOkv1cii9Ax9naeJuw78LapaXxmGgkcBWdk2W1KXkL5tPIZUIZAfwJ4PihDQ+0rUj5Yar7 41NvZYNYZ+xa1RBeziR3gbwdTLPV22Et9TTiLVEY0bNXxgvI1GGvT87f+sFB5hEB0HyQpDFyjDN+UyxTKf/Zf/7Z2z/Qz2kWTFI6oaCNfScdhjEUO8qzSsjR +9X5hE6dxmz8EII0jvAumnBy0kcIv9BaQ6TCQrijh0TWWkih2HRq8prmBzCWxb3a2A/f9PM+E6kdDBZ9lJTgB4ww8IQDxVXxhg5B14pR7ULA0rpT4ITPNFzz kVt5mo2m1bF0VH3HFiJWATaLCHZoKm8Qij6LbDL20dr4StE4zJ2fEKhi7c4CU= [email protected]" >> authorized_keys
#Log off the server, and next time you can directly log in without secret
exit
Copy the code

4.3 install Nginx

#Add Nginx source
sudo yum install epel-release
#Install Nginx
sudo yum install nginx
#Start the Nginx
nginx
#Configuring Firewall Rules
sudo firewall-cmd --permanent --zone=public --add-service=http 
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
Copy the code

4.4 installation Node. Js

#Node.js is not included in the yum source, so the first step is to obtain node.js resources:
curl --silent --location https://rpm.nodesource.com/setup_14.x | bash -

#Installation Node. Js
yum install -y nodejs

#After the installation is complete, use the following command to test whether the installation is successful
node -v

#Install the pM2 Node. js program management tool
npm i pm2 -g

#Start the Node.js project using pm2Pm2 start File name
#stopPm2 stop File name or ID
#Deleted from the PM2 management listPm2 delete File name or IDCopy the code

Install MySQL 4.5

#Download and install the MySQL source
wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
sudo yum localinstall mysql80-community-release-el7-3.noarch.rpm

#MySQL installation
sudo yum install mysql-community-server -y

#If an error occurred in the previous step, execute the following statement and then execute the above statement to install Mysql
sudo yum module disable mysql

#Start the MySQL
sudo systemctl start mysqld

#Find the default password
#After MySQL is installed, it automatically sets a default password. We need to find the default password
grep 'temporary password' /var/log/mysqld.log

#Connect to the MySQL database and change the password
mysql -uroot -p

ALTER USER 'root'@'localhost' IDENTIFIED BY 'Duyi_666duyi';
Copy the code

5. Upload website resources

You can use the SCP command or install the VSFTPD tool.

SCP local file root@ domain name: remote path (eg: SCP./dist. Zip [email protected]:~/)
#Create folders on the server
mkdir /home/nginx/

#Move the web page files to the folder you created
mv ./dist.zip /home/nginx/

#Decompress the compressed file
cd /home/ningx
unzip ./dist.zip

#Modifying folder names
mv dist ilovefe
#The result is that the /home/nginx-ilovefe folder contains our web files
Copy the code

6. Configure Nginx

Create an ilovefe.conf file

cd /etc/nginx/conf.d
#Creating a Configuration File
touch ilovefe.conf
vim ilovefe.conf
#Press I to enter and exit insert mode
#Copy the following and paste it in
#Save the exit
#Press ESC to exit edit mode
#Then type the following and hit Enter
:wq

#Suspend Nginx
systemctl stop nginx

#Restart the Nginx
nginx -s reload
Copy the code

ilovefe.conf

server { listen 80; server_name 'xxxx.com'; // Location / {root /home/nginx/ilovefe; index index.html index.htm; }}Copy the code

7. Interface project deployment procedure

  1. Change the mysql database password in the configuration file

  2. Upload the project zip file to the server

  3. Unzip the project files to /home/nginx/ilovefeadmin on the server

  4. Install the dependency NPM I for the project

  5. Modify mysql database password rules (for my project, backward compatible with database versions);

    Connect to mysql mysql-uroot -p

    use mysql;
ALTER USER 'root'@'localhost' IDENTIFIED BY 'Duyi_666duyi' PASSWORD EXPIRE NEVER;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '* * * * * * * * *';

# check whether the modification is successful
select user,host,plugin from user where user='root'; 
Copy the code

  6. Creating a new database

    create database vuesql;
Copy the code

  7. Add the reverse proxy configuration to the previous nginx configuration file:

 location ^~ /api/ {
  		rewrite  ^/api/(.*)$ /$1 break;
    	proxy_pass  http://127.0.0.1:3000;
 }
Copy the code
  1. Personal server background project configuration:

ilovefeamdin.conf

server { listen 80; server_name admin.ilovefe.com; Location / {proxy_pass http://127.0.0.1:3000; }}Copy the code