Skip to main content

源码部署

项目采用前后端分离模式开发，前后端都需要部署。

前置说明​

1、确保服务器上已安装nginx、nodejs环境
2、服务器根目录创建部署目录：
    www
        |- h5ds      放置前端资源文件和后端代码

前端项目部署​

根据上面说明，构建打包好前端静态资源（也就打包好的www目录）后，只需要将代码上传到服务器/www/h5ds目录下并重命名为web:

www
    |- h5ds
        |- web               放置前端打包好的文件（本地打包好的www目录重命名为web）
            |- *Assets       前端打包好的资源文件
            - *.html         前端打包好的文件
            |-web            仅SSR模式打包会有该目录
        |- h5ds-server       放置服务端项目源码

注意：如果前端选用的是服务端渲染（SSR）模式打包后的资源，启动一个ssr服务，如下：

1、确保服务器已安装pm2和yarn
2、上传打包好的前端资源到/www/h5ds/web目录下
3、安装依赖并启动ssr服务（该服务默认监听7200端口）
  $ cd /www/h5ds/web/web
  $ yarn install
  $ yarn server

服务端项目部署​

该部分将介绍如何采用源码方式部署服务端server项目，分如下两种方式部署：

1、纯手动部署
2、基于gitlab实现cicd自动部署

注：基于docker容器化部署模式请参考容器部署

手动部署server​

1、初次部署​

// 1、拉取代码
$ cd /www/h5ds
$ git clone https://项目地址/h5ds-server.git


// 2、配置config,目前本项目支持 本地.env 和 远程nacos 两种配置模式，用户根据自身选择，下方以本地.env模式为例
$ cd h5ds-server
$ cp .env.example .env    # 复制.env.example 为 .env ,并配置值

// 3、安装依赖，如果没有 yarn 则先安装 $ npm install -g yarn 
$ yarn

// 4、【仅首次执行】数据初始化（ 安装数据表 + 初始化数据(初始化角色、超级管理员)【慎用，会先清空admin/role/role_admin三张表，再插入数据】）
//注意：如果数据库和开发环境一致且在开发环境执行过初始化则此步骤可以不执行
$ yarn init-server

//【可选】可手动导入全国地址信息表数据（database/sqls/region.sql 文件中的sql语句直接在数据库中导入即可，注意先修改表名）

// 5、启动服务(服务监听的端口在.env中自由配置，默认监听8080)
$ yarn start

//通过访问 http://IP:8080 来测试server部署情况

//【可选】停止服务
$ yarn stop

2、更新部署​

$ cd /www/h5ds/h5ds-server

// 拉取新代码
$ git pull --all

//【可选】安装依赖
$ yarn

//【可选】执行数据迁移命令升级数据结构
$ yarn migrate

// 重启服务
$ yarn restart

基于gitlab实现cicd自动部署server​

gitlab-runner安装与配置​

参考文档

整体流程​

开发人员在master分支上做提交之后，gitlab-runner根据配置，自动拉取最新代码并根据.gitlab-ci.yml中的脚本执行命令。

整体逻辑与手动部署模式有一下一些区别点：

1、gitlab-runner拉取的代码位置有变化（类似 /home/gitlab-runner/builds/F3wJJRMQ/0/h5ds/h5ds-server）

2、gitlab-runner每次构建都会清空目录重新拉取代码，如何保留使用上一次的.env/init_lock文件，目前做法如下：

总体思路是将这两个文件放置到h5ds-server文件同级目录来管理，在自动构建部署过程中通过构建脚本来copy文件到项目中

***/h5ds
    |- h5ds-server
    - .env
    - init_lock

当然也可以在gitlab cicd配置中将.env / init_lock 文件加入cache中，具体如何处理可自行决定

Nginx配置说明​

完成上述工作后，前端静态资源准备就绪且server服务已经正常启动。接下来通过nginx来代理前端静态资源，并对将接口/api相关的路由都代理到server服务。

修改nginx.conf配置文件​

nginx.conf文件http部分增加如下配置

http{
    ...
    ...

    #客户端最大body
    client_max_body_size 50M;
    #启用连接符
    disable_symlinks off;

    # load configs
    include /etc/nginx/conf.d/*.conf;
}

普通模式（www.h5ds.com）​

该模式适用于直接以域名 www.h5ds.com 访问本项目的情况。

项目nginx配置文件 /etc/nginx/conf.d/h5ds-v7.conf

#项目配置
server {
    listen 8081;
    server_name localhost;
    client_max_body_size 1000M;

    #生成Let's Encrypt 证书时验证使用
    location = /.well-known {
      allow all;
    }

    #前端打包好的页面及资源目录
    root "/www/h5ds/web";

    #前端web
    location / {
        index index.html;
    }
    #前端app预览
    location ^~ /apps {
        try_files /apps.html =404;
    }

    #mobil端资源目录
    location ~ ^/(mobile$|mobile/) {
        try_files /mobile.html =404;
    }

    #editor目录
    location ~ ^/(editor$|editor/) {
        try_files /editor.html =404;
    }
    #admin管理端
    location ~ ^/(admin$|admin/) {
        try_files /admin.html =404;
    }
    #server Api接口服务
    location ~ ^/(api|pay) {
        #大文件上传限制
        client_max_body_size 1000M;
        # define buffers, necessary for proper communication to prevent 502s
        proxy_buffer_size 128k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #下方代理到server启动时监听的ip和端口号上，默认是8080，注意proxy_pass的值最后一定不能要/
        proxy_pass http://localhost:8080;
    }

    # 定义错误页面码，如果出现相应的错误页面码，转发到那里。
    error_page  404  /404.html;
    # 承接上面的location。
    location = /404.html {
        # 放错误页面的目录路径。
        try_files /index.html =404;
    }
}
#http配置
server {
    listen       80;
    server_name  www.h5ds.com;

    #把http的域名请求转成https
    #return 301 https://$host$request_uri;

    #默认不重定向http到https,与上面重定向配置二选一配置
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;
        proxy_pass http://localhost:8081/;
    }

    # gzip
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
}

#https配置
server {
    listen 443;
    server_name www.h5ds.com;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/www.www.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.www.com/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/www.www.com/chain.pem;
    ssl_session_timeout 5m;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;
        proxy_pass http://localhost:8081/;
    }

    # gzip
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
}

二级路由模式(www.h5ds.com/h5)​

该模式适用于主域名已经有项目占用的情况，希望通过类似 www.h5ds.com/h5 这样方式访问本项目

注意：该模式需要前端项目在打包的时候设置为二级路由模式打包

项目nginx配置文件 /etc/nginx/conf.d/h5ds-v7.conf

#项目配置
server {
    listen 8081;
    server_name localhost;
    client_max_body_size 1000M;

    #生成Let's Encrypt 证书时验证使用
    location = /.well-known {
      allow all;
    }

    #前端打包好的页面及资源目录
    root "/www/h5ds/web";

    #前端web
    location / {
        index index.html;
    }
    #前端app预览
    location ^~ /apps {
        try_files /apps.html =404;
    }

    #mobil端资源目录
    location ~ ^/(mobile$|mobile/) {
        try_files /mobile.html =404;
    }

    #editor目录
    location ~ ^/(editor$|editor/) {
        try_files /editor.html =404;
    }
    #admin管理端
    location ~ ^/(admin$|admin/) {
        try_files /admin.html =404;
    }
    #server Api接口服务
    location ~ ^/(api|pay) {
        #大文件上传限制
        client_max_body_size 1000M;
        # define buffers, necessary for proper communication to prevent 502s
        proxy_buffer_size 128k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #下方代理到server启动时监听的ip和端口号上，默认是8080，注意proxy_pass的值最后一定不能要/
        proxy_pass http://localhost:8080;
    }

    # 定义错误页面码，如果出现相应的错误页面码，转发到那里。
    error_page  404  /404.html;
    # 承接上面的location。
    location = /404.html {
        # 放错误页面的目录路径。
        try_files /index.html =404;
    }
}

原项目的nginx配置文件做如下调整

#原来项目server配置
server {
    ...

    #采用二级路由的配置方式（www.www.com被其他项目占用时，希望www.www.com/h5/  访问h5ds项目）
    location ~ ^/(h5$|h5/) {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;

        #重写路由，去掉前缀部分
        rewrite /(h5)/(.+)$ /$2 break;
        #代理到h5ds项目域名上去
        proxy_pass http://localhost:8081/;
    }

    #原有配置
    location / {
        ...
    }

    ...
}

服务端渲染(SSR)模式(www.h5ds.com)​

该模式适用于服务端渲染SSR模式,更有利于网站SEO优化。该模式下相比其他方案，稍微复杂的地方在于将默认的地址代理到ssr服务，而其余的前端静态资源不代理到ssr服务。另外下方的配置中也加入了通过nginx来识别移动端从而代理到指定页面的功能。

注意：该模式需要前端代码打包时选择SSR模式打包，且手动启动SSR服务（该服务将默认监听7200端口）

项目nginx配置文件 /etc/nginx/conf.d/h5ds-v7-ssr.conf

#手机端配置
server {
    listen 8082;
    server_name localhost;
    #前端打包好的页面及资源目录
    root "/var/www/h5ds/web-ssr";
    location / {
        try_files /mobile.html =404;
    }
}

#项目配置
server {
    listen 8081;
    server_name localhost;
    client_max_body_size 1000M;

    #生成Let's Encrypt 证书时验证使用
    location = /.well-known {
      allow all;
    }

    #前端打包好的页面及资源目录
    root "/var/www/h5ds/web-ssr";

    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    #前端web
    location / {
        #如果是移动端，则加载移动端页面
        if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {
             proxy_pass http://localhost:8082;
        }

        #代理到服务端渲染服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        proxy_connect_timeout   18000;
        proxy_send_timeout      18000;
        proxy_read_timeout      18000;
        #前端代码ssr默认启动端口7200
        proxy_pass http://localhost:7200/;
    }
    #前端资源目录
    location ~ ^/(assets|adminAssets|editorAssets|mobileAssets|previewAssets)/ {
        root "/var/www/h5ds/web-ssr";
        #index index.html;
    }
    #前端资源目录
    location ~ ^/webAssets/ {
        root "/var/www/h5ds/web-ssr/web";
        #try_files $uri web/$uri =404;
    }


    #前端app预览
    location ^~ /apps {
        try_files /apps.html =404;
    }
    #mobil端资源目录
    location ~ ^/(mobile$|mobile/) {
        try_files /mobile.html =404;
    }
    #前端H5编辑器
    location ~ ^/(editor$|editor/) {
        try_files /editor.html =404;
    }
    #admin管理端
    location ~ ^/(admin$|admin/) {
        try_files /admin.html =404;
    }
    #server Api接口服务
    location ~ ^/(api|pay) {
        #大文件上传限制
        client_max_body_size 1000M;
        # define buffers, necessary for proper communication to prevent 502s
        proxy_buffer_size 128k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #下方代理到server启动时监听的ip和端口号上，默认是8080，注意proxy_pass的值最后一定不能要/
        proxy_pass http://localhost:8080;
    }

    # 定义错误页面码，如果出现相应的错误页面码，转发到那里。
    error_page  404  /404.html;
    # 承接上面的location。
    location = /404.html {
        #代理到服务端渲染服务 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;      
        proxy_connect_timeout   18000;
        proxy_send_timeout      18000;
        proxy_read_timeout      18000;
        proxy_pass http://localhost:7200/;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
    }
}

#http配置
server {
    listen       80;
    server_name  h5ds.com www.h5ds.com;

    #把http的域名请求转成https
    return 301 https://$host$request_uri;
}

#https配置
server {
    listen 443;
    server_name h5ds.com www.h5ds.com;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/h5ds.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/h5ds.com/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/h5ds.com/chain.pem;

    ssl_session_timeout 5m;
    
    location / {
        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        proxy_connect_timeout 1200;
        proxy_read_timeout 1200;
        proxy_send_timeout 1200;
        proxy_pass http://localhost:8081;
    }
    # gzip
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
}