Angular-SSR(服务端配置)过程记录

本地项目的准备工作请参考官方文档,不做解释,https://angular.cn/guide/universal 可以参考示例代码,
需要注意的时,配置文件的时候请检查好文件路径

这里主要介绍在使用Docker部署过程中的的问题记录,由于对express和Docker只是了解些皮毛,只是初步实现了目的.

这里项目名称统一为my-app

1.本地准备工作

1.主要的改动

新增的文件

app.server.module.ts
main.server.ts
webpack.server.config.js
server.ts
tsconfig.server.json

//如果用了hmr,compilerOptions里的types请保持和tsconfig.app.json一致
  {
     ...
    "compilerOptions": {
     ...
     "types": ["node"]
     ...
    },
  ...
  }

改动的文件
- app.module.ts
- angular.json

2.打包脚本

由于开发时ngcli安装在本地全局,但服务器环境时,全局不存在ng,所以需要使用npx来调用项目内部的库来实现打包

//package.json

{
  ...
  "scripts":{
    ...
    "webpack:server":"webpack --config webpack.server.config.js --progress --colors"
  }
  ...
}

//build-dev.sh

npx ng  build --prod --configuration=development --output-hashing=all&&
npx ng run my-app:server&&
npm run webpack:server

部署前,请在本地运行脚本并且启动确保没有错误

3.Docker配置

Dockerfile文件配置

EXPOS端口时,请保持和 server.ts 的端口一致

//Dockerfile-dev

FROM node:10

RUN sed -i -e "s/deb.debian.org/mirrors.163.com/g" /etc/apt/sources.list
RUN apt-get update
RUN apt-get install -y rsync

RUN npm config set registry https://registry.npm.taobao.org

WORKDIR /usr/src/app
COPY  .  /usr/src/app
RUN npm install 
RUN ./build-dev.sh
EXPOSE 4000
ENTRYPOINT node dist/server.js

初始化部署文件

//docker-init-dev.sh

//创建镜像和容器
docker build -t my-app:dev -f Dockerfile-dev .

//创建网络
docker network create --driver overlay --subnet 192.168.200.0/24  my-app-network 

//创建服务以便于访问内部
docker service create --mount src=my-app,dst=/usr/src/app/dist/my-app   --name my-app-server    --network  my-app-server-network  -p  21000:4000 tailor-web-server:dev

更新部署文件

//docker-deploy-dev.sh


docker build -t himark-admin-server:dev -f Dockerfile-dev .

&& docker service update  --container-label-add last_deployed=$(date -u +%Y-%m-%dT%H:%M:%S)  himark-admin-server

2.服务器部署

1.克隆项目并且执行部署脚本

./docker-init-dev.sh

部署后请查看镜像,容器,网络和服务是否都启动成功,执行对应命令即可

docker image ls 

docker container ls 

docker network ls

docker service ls

2.配置Nginx反向代理

{
  server_name   xxxxxxx;
  
  location / {
      proxy_pass http://127.0.0.1:21000;
  } 
}

3.通过volume进一步加速静态资源

upload successful

创建数据卷

docker volume create my-app

查看数据卷

docker volume inspect my-app
[
    {
        "CreatedAt": "xxxx",
        "Driver": "local",
        "Labels": null,
        "Mountpoint": "/data/docker/volumes/my-app/_data",
        "Name": "my-app",
        "Options": null,
        "Scope": "local"
    }
]

配置Nginx,通过过滤筛选条件将带后缀名的文件从数据卷中读取

server_name   xxxxxxx;


location ~* ^/(.*\.[^/]*)$ {
   alias /data/docker/volumes/my-app/_data/$1;
}

location / {
       proxy_pass http://127.0.0.1:21000;
}

Mccc