手把手學會網站部署（前后端）

網站上線部署

疑問：

• 用戶是怎么訪問到的我們開發好的網站的？

• 我們的項目開發完畢之后是怎么上線的？

• 實際開發過程當中，項目上線的活兒要前端程序員來做嗎？-----不需要

一、網站運行機制

1. 名詞解釋

域名

• www.baidu.com

• www.taobao.com

• www.qq.com

域名俗稱網址，是由一串用點分隔的名字組成，用於標識互聯網上的計算機。

原本用於標識互聯網上計算機使用的是 IP 地址，但是由於 IP 地址不便於記憶，所以人們便設計出來比較容易記憶的域名，然后通過 DNS 將域名和 IP 地址關聯，這樣人們便可以通過記憶域名直接訪問到對應的計算機。

DNS 服務器

DNS (Domain Name System)，可以理解為互聯網上的一項服務，他可以將域名轉換成其對應的 IP 地址。

可以將其理解為字典，字典中存儲的就是域名和 IP 地址一一對應的鍵值對。

本地 hosts 文件

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

mac: /etc/hosts

服務器

服務器其實就是一台計算機，但是這台計算機並和我們自己的的 PC 不一樣，不是日常使用的，而是提供某項互聯網服務的。

比如 web 服務器，能為我們提供網頁服務，email 服務器，能為我們提供電子郵件服務，FTP 服務器能為我們提供文件存儲服務等等。

為計算機安裝不同的服務應用程序，即可提供相應的服務。

常見的web 服務應用程序： Apache、Nginx、IIS、Node.js

 

 

 

 

 

 

 

 

 

2. 網站請求流程（簡化版）

靜態頁面

網頁只請求和響應簡單的 HTML、CSS、JavaScript 文件，未和服務端進行任何數據通信。這樣的頁面叫做靜態頁面。

動態頁面

頁面內有和服務器進行數據通信，這樣的頁面叫做動態頁面。

前后端分離的頁面

前后端分離的項目中，頁面中的數據渲染是在瀏覽器中完成的。

前后端分離的頁面請求分為兩部分： 靜態頁面請求 + ajax 數據請求

 

 

 

 

 

 

 

前后端不分離的頁面

前后端不分離的項目中，頁面中的數據渲染操作是在服務器端完成的。

前后端不分離的頁面一次請求就能完成。

 

 

 

 

 

二、網站上線部署流程

1. 服務器購買

國內服務器： 阿里雲 ECS(Elastic Compute Service)，騰訊雲 CVM(Cloud Virtual Machine) 等

國外服務器： 日本 Vultr, 美國 Linode, 谷歌雲，微軟 Azure，亞馬遜 AWS 等

這一步需要創建好服務器實例，分配好外網 IP 地址。

這里使用的是日本的Vultr（便宜）

2. 域名購買

國內： 萬網（阿里https://wanwang.aliyun.com）----推薦、騰訊等

國外： Godaddy

3. 域名解析（配置 DNS）

注冊好域名之后需要將域名映射到自己服務器對應的 IP 地址，這樣別人才能通過域名訪問到我們的服務器。

這個步驟叫做域名解析，通過域名服務商（https://wanwang.aliyun.com）提供的后台就可以操作，一般域名解析都會有延遲，不是即時生效的。通常10分鍾左右

使用通配符 *，@ 配置域名

4. 服務器環境搭建

配置服務器，Mac 系統下直接用終端就ok

windows下需要用到 git bash（windows下的仿linux命令行工具）, 或者別的工具（Putty）

需要用到的 Linux 系統操作命令

# 遠程連接命令
ssh root@域名
​
# 展示當前文件夾路徑
pwd
​
# 創建文件夾
mkdir 文件夾名
​
# 創建文件
touch 文件名
​
# 切換文件夾目錄
cd 目錄路徑
​
# 展示當前文件夾中內容
ls
​
# 編輯文件
vim 文件路徑
​
# 保存文件並退出
:wq
​
# 傳輸文件 
scp 本地文件路徑 root@域名:遠程路徑
​
# 解壓文件命令
unzip 

4.1 安裝 CentOS 開發人員相關包

yum groupinstall 'Development tools'

####4.2 配置免密登陸

# 在自己電腦上 生成本地 秘鑰對
ssh-keygen -t rsa 
​
# 生成的位置
# mac 在 ~/.ssh
# windows 在 C:\users\你的用戶名\.ssh
​
# 在服務器創建了一個.ssh 文件夾
mkdir .ssh
​
# 切換到這個文件夾
cd .ssh
​
# 創建了一個文件
touch authorized_keys
​
# 我們把自己電腦上的 id_rsa.pub 文件中的內容 放到 authorized_keys文件中
echo "cqHuvyGI2EXH5EOT/wsjIlNqH6kRaGRzLOcYAoYyn+0nsPhEfFOkv1cii9Ax9naeJuw78LapaXxmGgkcBWdk2W1KXkL5tPIZUIZAfwJ4PihDQ+0rUj5Yar741NvZYNYZ+xa1RBeziR3gbwdTLPV22Et9TTiLVEY0bNXxgvI1GGvT87f+sFB5hEB0HyQpDFyjDN+UyxTKf/Zf/7Z2z/Qz2kWTFI6oaCNfScdhjEUO8qzSsjR+9X5hE6dxmz8EII0jvAumnBy0kcIv9BaQ6TCQrijh0TWWkih2HRq8prmBzCWxb3a2A/f9PM+E6kdDBZ9lJTgB4ww8IQDxVXxhg5B14pR7ULA0rpT4ITPNFzzkVt5mo2m1bF0VH3HFiJWATaLCHZoKm8Qij6LbDL20dr4StE4zJ2fEKhi7c4CU= [e-mail]" >> authorized_keys
​
# 退出服務器，下次直接就能免密登陸了
exit

4.3 安裝Nginx

# 添加 Nginx 源
sudo yum install epel-release
# 安裝 Nginx
sudo yum install nginx
# 啟動 Nginx
nginx
# 配置防火牆規則（防火牆默認允許的是22端口，添加80和443端口）
sudo firewall-cmd --permanent --zone=public --add-service=http 
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

4.4 安裝Node.js

# yum自帶源中沒有Node.js,所以首先要獲取Node.js資源：
curl --silent --location https://rpm.nodesource.com/setup_14.x | bash -
​
# 安裝 Node.js
yum install -y nodejs
​
# 安裝完成之后使用如下指令測試安裝是否成功
node -v
​
# 安裝pm2 node.js程序管理工具
（一旦node進程報錯，會嘗試重啟，保證我們代碼一直在線，不會出現宕機的情況）
npm i pm2 -g
​
# 使用pm2 啟動node.js項目
​
pm2 start 文件名（如app.js）
​
# 停止
pm2 stop 文件名或者id
​
# 從pm2的管理列表中刪除
pm2 delete 文件名或者id

4.5 安裝MySQL

# 下載並安裝 MySQL 源
wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
sudo yum localinstall mysql80-community-release-el7-3.noarch.rpm
​
# 安裝 MySQL
sudo yum install mysql-community-server -y
​
# 如果上一步報錯 執行下面的語句 之后 再次執行一下上面的安裝Mysql的語句
sudo yum module disable mysql
​
# 啟動MySQL
sudo systemctl start msyqld
​
# 找到默認密碼
# MySQL安裝完畢之后會自動設置一個默認密碼，我們需要找到默認密碼
grep 'temporary password' /var/log/mysqld.log
​
# 連接到MySQL數據庫，修改密碼
mysql -uroot -p
​
# 修改原來的密碼
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';
​
# 退出mysql
quit

5. 准備網站資源

使用vscode工具，yarn或者npm包管理工具。需要准備好原始項目並打包好（build）之后的代碼。

#安裝前端代碼依賴
npm i
​
#進行打包，打包完項目中會有一個dist目錄，將dist文件夾進行壓縮得到dist.zip
npm run build
​

6. 上傳網站資源

可以使用 scp 命令，也可以安裝 FTP （vsftpd）工具。

## scp 本地文件 root@域名:遠程路徑   ~ 根目錄的意思
scp ./dist.zip root@xxx:~/
​
# 查看服務器中是否有Nginx文件夾
ls /home/nginx
​
# 在服務器創建文件夾
mkdir /home/nginx/
​
# 把網頁文件移動到創建好的文件夾里
mv ./dist.zip /home/nginx/
​
# 解壓壓縮文件
cd /home/ningx
unzip ./dist.zip
​
# 刪除壓縮包
rm dist.zip
​
# 修改文件夾名字
mv dist ilovefe
# 結果就是 /home/nginx/ilovefe 這個文件夾中放的就是我們的網頁文件了

 

7. 配置Nginx

創建一個ilovefe.conf文件,告訴Nginx在哪里拿對應文件

cd /etc/nginx/conf.d
# 創建配置文件
touch ilovefe.conf
vim ilovefe.conf
# 按i鍵 進出插入模式
# 復制下面的內容，粘貼進去
server {
    listen       80;
    server_name  ilovefe.com;

    location / {
        root   /home/nginx/ilovefe;
        index  index.html index.htm;
    }
    
}

# 保存退出
# 按一下esc退出編輯模式
# 然后輸入 下面的內容 敲回車
:wq

# 需要對Nginx重啟
systemctl stop nginx
nginx

截止目前可以訪問頁面，但是接口數據還不能請求，接着接口項目部署步驟

 

ilovefe.conf

server {
    listen       80;
    server_name  ilovefe.com;

    location / {
        root   /home/nginx/ilovefe;
        index  index.html index.htm;
    }
    
}

8.准備后端資源

修改后端項目中的mysql對應的password（如在config中配置的數據庫鏈接）

# 修改后端項目中的mysql對應的password（如在config中配置的數據庫鏈接）
module.exports = {
  port: 3000,
  database: {
    DATABASE: 'vuesql',
    USER: 'root',
    PASSWORD: '123456',
    PORT: '3306',
    HOST: 'localhost',
  },
  jwt_secret: 'ddff0a63e06816ddd7b7d2e2ebc1e40205',
};

#上傳后端代碼壓縮包
scp ./video-admin-master.zip [e-mail]:~/


# 在服務端查看
ls

# 移動zip文件
mv video-admin-master.zip /home/nginx/

# 進入 /home/nginx
cd /home/nginx


# 解壓並刪除壓縮包
unzip video-admin-master.zip
rm -rf __MAXCOSX/
rm -rf video-admin-master.zip\

# 改名稱
mv video-admin-master.zip ilovefeadmin

# 進入ilovefeadmin/
cd ilovefeadmin

 

9. 接口項目部署步驟

1. 修改本地配置文件中的 mysql 數據庫密碼（上面已完成）

2. 上傳項目壓縮文件到服務器（已完成）

3. 在服務器上解壓項目文件到 /home/nginx/ilovefeadmin（已完成）

4. 為項目安裝依賴項 npm i

5. 進入到服務器端數據庫 mysql -uroot -p

6. 輸入密碼 123456

7. 修改mysql數據庫 密碼規則（由於后端管理項目中，接口用的是koa中的插件鏈接數據庫的，版本密碼規則比較低，而服務器中數據庫版本比較高，所以不兼容，降低服務端數據庫版本，修改數據庫密碼規則。）

   use mysql;
   # 修改過期時間
   ALTER USER 'root'@'localhost' IDENTIFIED BY '123456' PASSWORD EXPIRE NEVER; 
   # 修改密碼規則
   ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
   
   # 查看是否已經修改成功
   select user,host,plugin from user where user='root'; 

8. 創建新的數據庫

   create database vuesql;
   
   # 擴展
   導入數據庫數據
   
   # 退出數據庫
   quit

9. 使用pm2 啟動ilovefeadmin項目

   pm2 start index.js
   
   此時后端代碼已經在運行
   
   但是當前端頁面請求數據時（http://www.ilovefe.com/api），nginx還是去找的ilovefe網站的根目錄，沒有轉發到node.js中，因此需要做nginx代理，讓以api開頭的請求轉發到node.js

    

10. 在之前的nginx配置文件中添加反向代理的配置：

 # 進入到nginx配置文件中
 cd /etc/nginx/conf.d/
 
 # 查看文件狀態
 ls
 
 # 編輯文件並且按o（字母o）鍵進行編輯
 vim ilovefe.conf
 
 # 在location代碼下面添加一下代碼（注意不是覆蓋）
 location ^~ /api/ {
  		rewrite  ^/api/(.*)$ /$1 break;
    	proxy_pass  http://127.0.0.1:3000;
 }
 
 # 退出
 esc
 :wq
 
 # 重新啟動nginx
 nginx -s reload

 

10.部署后端管理項目（前后端不分離項目）

# 進入到conf.d目錄下

# 查看目錄
ls

# 復制ilovefe.conf,命名為ilovefeadmin.conf
cp ilovefe.conf ilovefeadmin.conf

#編輯ilovefeadmin.conf
vim ilovefeadmin.conf

#配置文件ilovefeadmin.conf
server {
    listen       80;
    server_name  admin.ilovefe.com;      (后台管理系統)
    
    location / {
    	proxy_pass  http://127.0.0.1:3000;
		}
}

# 退出
esc
:wq

# 重啟
nginx -s reload

# 到網頁端登錄后台管理系統
admin.ilovefe.com

# 賬號密碼
賬號：admin
密碼：admin

# 在頁面上傳數據