购买服务器
远程登录服务器
手动部署
自动化部署
- 基于git actions
- 基于nginx和node
启动 Nginx
检查配置文件是否 ok
开启gzip
启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip 压缩级别 1-10
进行压缩的文件类型。
是否在http header中添加Vary: Accept-Encoding，建议开启
- 反向代理配置

购买服务器

https://ecs-buy.aliyun.com/wizard?spm=5176.8789780.1092585.1.727b55cafcMfAv#/prepay/cn-hangzhou?periodType=Yearly&period=1&instanceType=ecs.g5.large
购买香港节点（域名不需要备案）
系统选择CentOS 8

远程登录服务器

我是用putty登录到服务起的。

登录到服务器
ssh root@远程服务器ip地址（外）
curl https://youtub.com 访问页面内容
ssh -D 1080 root@远程服务器ip地址（代理）

SSH免密登录

客户端操作
生成密钥对（使用Batch模式打开cdm）

cd C:\User\Administrator\.ssh
ssh-keygen（生成ssh密钥对）

把公钥拷贝到服务器

scp bduan.pub root@8.210.31.113:/root/.ssh

服务端
ssh root@8.210.31.113 （登录到服务器）
ls (查看目录)
cd .ssh（跳转到.ssh目录）
然后把bduan.pub追加到服务器的.ssh/authorized_keys里面去

cat >> authorized_keys < bduan.pub

修改本地.ssh/config文件
Host 8.210.31.113
HostName 8.210.31.113
User root
PreferredAuthentications publickey
IdentityFile C:\User\bduan.ssh\bduan(密钥)

重启下ssh
systemctl restart sshd

手动部署

安装NodeJs
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash
安装node
nvm install —lst(安装最新版本)
nvm isntall version
全局安装pm2
npm -i pm2 -g

将下列文件打包成zip
- .nuxt
- static
- nuxt.config.js
- package.json
- package-lock.json
- pm2.config.json

然后在服务器创建home/nuxt-demo文件夹
mkdir home
cd home
mkdir nuxt-demo
ls -a查看所有文件

然后在本地上传文件
先cd跳到zip所在的文件夹
szp nuxt-demo.zip root@id:/home/nuxt-demo

然后再服务器端解压
先安装unzip
yum install unzip

然后删掉zip
rm -rf nuxt-demo.zip

然后运行
npm install
pm2 start

然后通过curl http://0.0.0.0:4010查看是否部署成功

最后一步需要去阿里云上修改端口

**
手动添加一个安全组配置

自动化部署

基于git actions

创建远程仓库
设置TOKEN
然后编写main.yml脚本
添加secrets
git tag v0.1.0
git push origin v0.1.0
基于nginx和node
安装nginx（服务器端） ```html yum install nginx

which nginx nginx -v

启动 Nginx

nginx nginx -s reload nginx -s stop

检查配置文件是否 ok

nginx -t

**nginx配置**
- 备份配置文件
   - cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup
- 修改配置文件路径
   - vim /etc/nginx/nginx.conf
- 当配置文件修改之后，要重启 nginx ！！！！！！！！！！<br />
- 查看错误日志
   - cat /var/log/nginx/error.log
本地运行node脚本主动部署<br />app.js
```html
#!/usr/bin/env node
// app.js
const path = require('path')
const config = require('./config')
const compressFile = require('./lib/compress')
const connectServe = require('./lib/ssh')
const runCommand = require('./lib/commander')
const uploadFile = require('./lib/uploadFile')
const fs = require('fs')
// 可单独执行
async function main () {
  const localFile = path.join(__dirname, config.targetFile)
  config.openCompress ? await compressFile(config.targetDir, localFile) : '' //压缩
  ssh = await connectServe(config.ssh) // 连接
  await uploadFile(ssh, config, localFile) // 上传
  await runCommand(ssh, 'unzip ' + config.targetFile, config.deployDir) // 解压
  await runCommand(ssh, 'mv dist ' + config.releaseDir, config.deployDir) // 修改文件名称
  await runCommand(ssh, 'rm -f ' + config.targetFile, config.deployDir) // 删除
  console.log('所有操作完成！')
  process.exit()
}
// run main
main()

config.js

// config.js
/*
说明：
  请确保解压后的文件目录为dist
  ssh: 连接服务器用户信息
  targetDir: 需要压缩的文件目录（需开启压缩）
  targetFile: 指定上传文件名称（该文件同级目录）
  openCompress: 关闭后，将跳过目标目录压缩步骤，直接上传指定文件
  openBackUp: 开启后，若远端存在相同目录，则会修改原始目录名称，不会直接覆盖
  deployDir: 指定远端部署地址
  releaseDir: 指定远端部署地址下的发布目录名称
*/
const config = {
  ssh: {
    host: 'nllcoder.com',
    port: '22',
    username: 'root',
    password: '123@xxxx'
  },
  targetDir: '../vue3-demo/dist', // 目标压缩目录(可使用相对地址)
  targetFile: 'dist.zip', // 目标文件
  openCompress: true, // 是否开启压缩
  openBackUp: false, // 是否开启远端备份
  deployDir: '/home/', // 远端目录
  releaseDir: 'www' // 发布目录
}
module.exports = config

nginx配置缓存

memory cache(内存缓存)
disk cache(硬盘缓存)
强缓存
- <- cache-control: max-age=600 —— no-store 不缓存 no-cache 不使用强缓存
- <- expires: Mon, 14 Sep 2020 09:02:20 GMT
协商缓存
- <- last-modified: Fri, 07 Aug 2020 02:35:59 GMT
- -> if-modified-since: Fri, 07 Aug 2020 02:35:59 GMT
- <- etag: W/“5f2cbe0f-2382”
- -> if-none-match: W/“5f2cbe0f-2382” ```html http {
  开启gzip
  gzip on;
  启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;
  gzip 压缩级别 1-10
  gzip_comp_level 2;
  进行压缩的文件类型。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;

etag on; }

强缓存配置
```html
server {
  location ~* \.(html)$ {
  access_log off;
  add_header  Cache-Control  max-age=no-cache;
}
location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
  access_log off;
  add_header    Cache-Control  max-age=360000;
}
}

## HTTPS 配置
- https://buy.cloud.tencent.com/ssl
- **HTTPS 域名还需要配置！！**

ssl_certificate “/etc/pki/nginx/server.crt”; ssl_certificate_key “/etc/pki/nginx/private/server.key”;

- 安全组规则里打开 443 端口
- HTTP/2 演示
  - https://http2.akamai.com/demo
  - 链路复用
  - 压缩请求头
  - 必须配置 HTTPS

return 301 https://www.nllcoder.com$request_uri;

```bash
server {
        listen       443 ssl http2 default_server;
        # listen       [::]:443 ssl http2 default_server;
        server_name  www.nllcoder.com;
        root         /usr/share/nginx/html;
        ssl_certificate "/etc/pki/nginx/www.nllcoder.com_bundle.crt";
        ssl_certificate_key "/etc/pki/nginx/private/www.nllcoder.com.key";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

反向代理配置

location /api/ {
    proxy_pass http://realworld.api.fed.lagounews.com/api/;
}
# ^~ 以/开头的内容
location ^~ / {
    # 注意这里末尾要有 /，会把请求的路径拼接过来
    proxy_pass http://127.0.0.1:3000/;
}

location /api/ {
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, PATCH, DELETE, OPTIONS';
  add_header Access-Control-Allow-Headers 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, X-Requested-With';
  add_header Access-Control-Max-Age 86400;
  proxy_pass http://realworld.api.fed.lagounews.com/api/;
}

前端知识积累

阿里云部署

购买服务器

远程登录服务器

手动部署

自动化部署

基于git actions

基于nginx和node

启动 Nginx

检查配置文件是否 ok

开启gzip

启用gzip压缩的最小文件；小于设置值的文件将不会被压缩

gzip 压缩级别 1-10

进行压缩的文件类型。

是否在http header中添加Vary: Accept-Encoding，建议开启

反向代理配置