# 拉取代码

# Docker 部署

  1. 如果不需要修改前端项目,只需要拉取后端项目 (opens new window)
  2. 在 app/config/pushConfig.js 配置是否开启邮箱、钉钉推送,推送时间
  3. 在同级目录新建一个 docker-compose.yml 的文件,修改 SERVER_IP,然后运行 docker-compose up 就能部署项目了
services:
  weekly-back:
    build:
      context: weekly-back
    ports:
      - 1200:1200
      - 3030:3030
    environment:
      - SERVER_IP=10.201.78.8
    depends_on:
      - mysql
  mysql:
    image: mysql:8.0.21
    command: mysqld --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --skip-character-set-client-handshake
    restart: always
    ports:
      - 3306:3306
    volumes:
      - './weekly-back/mysql:/docker-entrypoint-initdb.d'
    environment:
      TZ: Asia/Shanghai
      MYSQL_DATABASE: weekly
      MYSQL_ROOT_PASSWORD: 1234qwer
      MYSQL_ROOT_HOST: '%'
  weekly-front:
    image: ninja008/zooteam-weekly-front:latest
    # build:
    #   context: weekly-front
    ports:
      - 80:80
    environment:
      - SERVER_IP=10.201.78.8
    depends_on:
      - weekly-back
      - mysql
  1. docker-compose.yml 文件中的前端项目,默认使用了 docker hub 上的镜像。如果想对前端项目进行修改,可以拉取前端项目,docker 构建的时候选择本地的路径就行

# 常规部署

# 修改配置

  • 前端项目:
    • src/utils/request.js 配置前端请求的 ip 和端口
    // 后端服务的ip和端口。3030在后端项目中写死,可以到后端项目中修改
    const BASE_URL = 'http://ip:3030';
    const instance = axios.create({
      baseURL: BASE_URL,
    });
    
    module.exports = {
      isHttps: false, // 是否开启https
      // https key
      httpsOption: {
        key: 'weekly.zoo.team.key',
        cert: 'weekly.zoo.team_bundle.crt',
      },
    };
    
  • 后端项目:
    • app/config/dbConfig.js 配置本地数据库和线上数据库
    module.exports = {
      env: process.env.NODE_ENV, // development or production
      database: {
        // 本地数据库地址
        development: {
          host: '10.201.78.8',
          user: 'root',
          password: '1234qwer',
          database: 'test',
        },
        // 线上数据库地址
        production: {},
      },
    };
    
    module.exports = {
      enable: false, // 是否使用https
      // https证书配置
      httpsCert: {
        key: fs.readFileSync('key.pem'),
        cert: fs.readFileSync('cert.pem'),
      },
      domain: 'http://weekly.zoo.team', // 配置域名或者是服务器ip,用于邮件推送的跳转
    };
    
    • app/config/pushConfig.js 配置是否开启邮箱、钉钉推送,推送时间
    const pushMailNotion = false; // 是否开启邮箱推送
    const pushDingNotion = false; // 是否开启钉钉推送
    const dingAccessToken = ''; // 钉钉群的token
    const START_TIME = '2018-10-22'; // 开始时间,用于记录当前是第几期小报
    module.exports = {
      dingConfig: { pushDingNotion, dingAccessToken },
      mailConfig: {
        pushMailNotion,
          // 邮箱server配置。这边以阿里云邮箱为例
          mailServerCfg: {
          service: 'qiye.aliyun',
          port: 25, // SMTP 端口
          host: 'smtp.mxhichina.com',
          secureConnection: true, // 使用SSL
          auth: {
            user: 'A@cai-inc.com',
            pass: 'XXX',
          },
        },
        // 邮件发送、抄送对象
        mailOptions: {
          from: '"政采云前端小报" <A@cai-inc.com>', // 邮件发送者
          to: ['B@cai-inc.com'], // 发送对象
          cc: ['C@cai-inc.com'], // 抄送对象
        },
        // 定时发送邮件的时间
        mailTime: {
          dayOfWeek: 5, // 每周五
          hour: 17, // 17点
          minute: 0,
          second: 0,
        },
      },
      START_TIME,
    };
    
  • 投稿插件:
    • src/config/index.js 配置插件请求的 ip 和端口
    const ip = 'XXX'; // 服务器地址
    const port = '3030'; // 3030在后端项目中写死,可以到后端项目中修改
    export const BASE_URL = `http://${ip}:${port}`; // 后端请求地址
    export const STATIC_URL = `http://${ip}`; // 前端网站地址
    

# 部署服务器

  1. 安装 Nginx、MySQL、Git、Node
yum install -y nginx mysql-server git nodejs
npm i pm2 -g
  1. 配置 ssh (opens new window)
  2. 进入前端项目,运行npm run build,然后点击 bash 脚本,把代码推送到服务器
  3. 进入后端项目,点击 bash 脚本,把代码推送到服务器
  4. 打开防火墙端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --zone=public --add-port=3002/tcp --permanent # 前端 ssr
firewall-cmd --zone=public --add-port=3030/tcp --permanent # 后端
firewall-cmd --zone=public --add-port=3306/tcp --permanent # MySQL
firewall-cmd --reload
  1. 修改 Nginx 的默认配置,然后启动 Nginx。需要配置 https 的可以参考 (opens new window)
# /etc/nginx/nginx.conf
# user 改成 root,server 改成如下
user root;
server {
  listen       80;
  root  /root/weekly/weekly-client/app/;
  location / {
    try_files $uri /index.html;
  }
  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
  {
    root  /root/weekly/weekly-client/app/;
    expires 30d;
  }
  location ~ .*\.(js|css)?$
  {
    root  /root/weekly/weekly-client/app/;
    expires 1h;
  }
}
  1. 初始化数据库。具体见
  2. 进入后端项目,运行npm i && npm run pro && npm run mail:pro

# 安装插件

进入插件项目,运行npm run build,把 zip 解压出来。浏览器访问 chrome://extensions/ ,开启 开发者模式,点击 加载已解压的扩展程序,文件夹路径指向刚才的文件夹。

# 使用

  • 当看到值得收藏的文章时,点击插件的图标,进入前端学院-投稿界面,点击投稿。 crx.png
  • 每期投稿的文章可以在前端页面上看到 weekly-front.png
Last Updated: 7/31/2021, 4:58:52 PM