Skip to main content

构建与发布

前端项目打包​

目前项目针对客户部署需求提供如下三种打包方式

1、普通模式
    适合将该项目独立部署为一个站点的情况（前后端共用一个域名，类似官网(https://www.h5ds.com)）

2、服务器端渲染模式（SSR）
    适合对SEO有优化需求的客户，该模式相比普通模式，差异只在访问部分路由时会采用服务端渲染来处理，而不是前端接口请求后的渲染处理

3、二级路由模式
    适合客户已有现成的系统占用主域名,希望通过二级路由将本项目挂载到原域名下（如：https://www.www.com/h5），该模式需要前端调整打包时资源的引用路径配置

前端项目整体目录结构说明​

h5ds-web
    |-packages              子项目源码目录
        |- h5-admin         后台管理系统源码  
        |- h5-assets        项目中引用的公共资源  
        |- h5-editor        编辑器源码  
        |- h5-mobile        手机端源码  
        |- h5-plugins       编辑器插件源码  
        |- h5-preview       H5预览源码  
        |- h5-ui            UI组件  
        |- h5-web           前台系统源码  
        -.gitignore git     忽略提交配置文件  
        -packages.json      node 包配置文件  
        -yarn.lock          包锁定文件
    |-www                   打包后的文件目录
        ......              具体目录结构参考下方说明

普通模式打包​

根目录下执行 yarn install
如果是windows系统 需要先全局安装包：esbuild-windows-64
根目录下执行：yarn build

执行结束后会在根目录下生成www文件目录，里面是生成的需要发布的文件

打包后目录结构说明： 

h5ds-web
    |-www                   打包后的文件目录
        |-adminAssets       后台管理系统资源  
        |-assets            公共资源  
        |-editorAssets      编辑器资源  
        |-mobileAssets      手机端资源  
        |-previewAssets     预览资源  
        |-webAssets         前台系统资源  
        -admin.html         管理系统首页  
        -apps.html          预览首页  
        -editor.html        编辑器首页  
        -index.html         前台系统首页  
        -mobile.html        手机端首页

服务器端渲染模式（SSR）打包​

根目录下执行 yarn install
如果是windows系统 需要先全局安装包：esbuild-windows-64
根目录下执行：yarn build:ssr

执行结束后会在根目录下生成www文件目录，里面是生成的需要发布的文件

打包后www目录结构说明： 

h5ds-web
    |-www                           打包后的文件目录
        |-adminAssets               后台管理系统资源  
        |-assets                    公共资源  
        |-editorAssets              编辑器资源  
        |-mobileAssets              手机端资源  
        |-previewAssets             预览资源  
        |-web                       前台系统的资源  
            |-assets                公共资源  
            |-server                服务器端渲染文件  
            |-webAssets             项目资源  
            -entryServer.js         服务器端入口文件  
            -index.html             前台首页  
            -package.json   
            -yarn.lock  
        -admin.html                 管理系统首页  
        -apps.html                  预览首页  
        -editor.html                编辑器首页   
        -mobile.html                手机端首页

二级路由模式打包​

整理中......

服务端项目构建​

目前服务端项目基于Eggjs框架并采用js编写，因此项目无需构建打包，部署时只需要将整个项目以源码方式部署到服务器即可。

docker镜像构建​

该部分将详细描述如何基于本地开发环境，来将整个前后端项目构建为自己的docker镜像。

前置条件​

搭建好本地开发环境，如果还未搭建好请参考开发环境准备把环境搭起来。开发环境整体目录如下：

h5ds
    |- .vscode                      vscode项目配置，可以直接通过F5 debug模式启动server
    |- build                        镜像构建所需配置文件目录
        |- nginx                    镜像内nginx配置文件目录
    |- config                       运行镜像容器时所需配置文件目录，运行时通过-v 挂载到容器中
        - .env.example              样板server配置文件，使用时需要复制为.env并配置其中的值
        - h5ds.conf                 容器内的项目nginx配置样板
    |- data                         运行时项目数据挂载目录（上传的数据、log等）
    |- workspace                    项目源码目录，放置前后端的项目代码
        |- h5ds-server              server项目源码
            |- ...                  业务源码
             - .env                 server配置文件
        |- h5ds-web                 前端项目源码
            |- ...                  业务源码
            |- www                  前端项目打包后的资源目录
    - Dockerfile                    dockerfile  
    - README.md                     使用文档

前端构建打包项目​

docker镜像的构建不会自动执行前端打包流程，需要按需手动打包前端代码（打包逻辑可参考前端项目打包）

打包之后得到 h5ds/workspace/h5ds-web/www 资源目录，构建docker镜像时将该目录COPY到镜像内即可。

server项目配置​

server项目需要保证已经安装好依赖

$ cd workspace/h5ds-server
$ yarn

构建docker镜像会将整个server项目一起COPY到镜像内

构建docker镜像​

在开发环境根目录（h5ds/）下,使用Dockerfile将项目构建为docker 镜像

#执行构建
$ docker build -t h5ds .

#清理TAG<none>镜像
$ docker image prune -f

#查看构建的镜像
$ docker images

#手动运行镜像
$ docker run -it --name h5ds -p 80:80 \
-v $PWD/h5ds-server/:/var/www/h5ds/server/ \
-v $PWD/config/h5ds.conf:/etc/nginx/conf.d/h5ds.conf h5ds

#说明
-v $PWD/h5ds-server/:/var/www/h5ds/server/          server 项目文件
-v $PWD/config/h5ds.conf:/etc/nginx/conf.d/h5ds.conf  项目nginx配置文件【可选配置，当.evn文件中multipart.disk=local且multipart.prefix_path!=/h5ds时，必须使用此映射且需要同步修改h5ds.conf中 location ~ ^/(api|pay|h5ds) 这句话里面的h5ds替换为修改后的值】

推送到远端镜像仓库​

#设置tag
$ docker tag h5ds registry.cn-hangzhou.aliyuncs.com/h5ds/h5ds-v7:latest

#推送镜像
$ docker push registry.cn-hangzhou.aliyuncs.com/h5ds/h5ds-v7:latest

#清理多余的<none>镜像
$ docker image prune -f