本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 現代 CSS 之高階圖片漸隱消失術 現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！ 現代 CSS 高階技巧，完美的波浪進度條效果！ 在上三篇中，我們詳細介紹了 CSS Painting API 是如 ...
購買阿裡雲伺服器
阿裡雲伺服器ECS
系統鏡像使用Ubuntu 20.04 LTS
使用ssh連接伺服器，終端或者CMD中執行：$ssh [email protected](阿裡雲伺服器賬號名@公網地址)
輸入賬號密碼即可連接上伺服器（如果配置公鑰，就不用再輸入密碼了，更加安全）
記得去阿裡雲的ECS的控制台，看看安全組中，是否開放了必要的埠
安裝必要的環境（進入伺服器之後，安裝必要的運行環境）
$apt update // 更新軟體源
$apt install git // 安裝git，用於拉取代碼，版本控制等
$curl -sL https:// deb.noadesource.com/setup_14.x | sudo -E bash // 添加hode 14的安裝源
$apt install nodejs // 安裝nodejs，基礎運行環境
$apt install yarn // 安裝yarn，用於管理npm依賴
$apt install nginx // 安裝nginx，伺服器，提供web服務
所有命令，都是在伺服器的root用戶下執行，所以不用加上sudo
上傳代碼到雲伺服器
如果想要把本地的代碼上傳到伺服器上，可以使用的工具有很多，比如：ftp，sftp，scp，git等等
使用git：$git clone xxx（存儲代碼的遠程地址）
打包生成靜態文件
進入到項目目錄，安裝必要的依賴：$yarn
執行打包：$yarn buld
使用ngix解析項目
修改nginx配置，把打包好的靜態資源，用nginx來提供web服務
（配置虛擬主機，可以部署多個項目）
$vim /etc/nginx/sites-available/default
按i鍵進入編輯模式，修改後的內容為：
server{
liesten 80 default_server;
listen [::]:80 default_server;
root /var/www/shop;
index index.html index.htm index.nginx-debian.html;
server_name shop.liiann.com;
location / {
try_files $uri $uri/ =404;
}
location ^~/api/ {
proxy_pass https://***.com // 後端介面地址
add_header 'Access-Control-Allow-Origin' '*' // 解決跨域問題
rewrite ^/api/(.*)$ /$l braek; // 刪除配置首碼
}
}
編輯之後按Esc鍵退出編輯模式，輸入:wq保存退出
檢查nginx配置，出現success就沒問題
$nginx -t
平滑重啟nginx：
$nginx -s reload
解析功能變數名稱
去功能變數名稱控制台，解析功能變數名稱，這裡解析的功能變數名稱，要和nginx配置的server_name一致
配置HTTPS
證書申請
瀏覽器端生成
dns校驗（再設置一個解析，驗證功能變數名稱合法性）
驗證通過後得到證書，下載證書到本地，在上傳到伺服器，這裡使用scp上傳。先傳到/tmp目錄：
$scp file [email protected]:/tmp
去伺服器，創建一個目錄，用來存放ssl證書：
$cd /etc/nginx
$ mkdir ssl
移動證書到創建的目錄：
$mv /tmp/file/etc/nginx/ssl
修改nginx配置
$vim /etc/nginx/sites-available/default
增加內容：
liesten 443 ssl;
ssl_certificate /etc/nginx/ssl/full_chain.pem;
ssl_certificate_key /etc/nginx/ssl/private.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MDS:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1 .2;
ssl_prefer_server_ciphers on;
檢查nginx配置，出現success就沒問題：
$ nginx -t
平滑重啟nginx
$nginx -s reload
nginx配置
server{
listen 80 default_server;
server_name shop.liiann.com;
rewrite ^(.*)https://server_name$1 permanent;
}
server{
liesten 443 ssl default_server;
ssl_certificate /etc/nginx/ssl/full_chain.pem;
ssl_certificate_key /etc/nginx/ssl/private.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MDS:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1 .2;
ssl_prefer_server_ciphers on;
root /var/www/shop/dist;
index index.html index.htm index.nginx-debian.html;
server_name shop.liiann.com;
location / {
try_files $uri $uri/ =404;
}
//配置api的代理
location ^~/api/ {
proxy_pass https://***.com // 後端介面地址
}
}
