本地项目的准备工作请参考官方文档,不做解释,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
1 2 3 4 5 6 7 8 9 10
| //如果用了hmr,compilerOptions里的types请保持和tsconfig.app.json一致 { ... "compilerOptions": { ... "types": ["node"] ... }, ... }
|
- 改动的文件
app.module.ts
angular.json
2.打包脚本
由于开发时ngcli安装在本地全局,但服务器环境时,全局不存在ng,所以需要使用npx来调用项目内部的库来实现打包
1 2 3 4 5 6 7 8 9 10
| //package.json
{ ... "scripts":{ ... "webpack:server":"webpack --config webpack.server.config.js --progress --colors" } ... }
|
1 2 3 4 5 6
| //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
的端口一致
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| //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
|
- 初始化部署文件
1 2 3 4 5 6 7 8 9 10
| //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
|
- 更新部署文件
1 2 3 4 5 6 7
| //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.克隆项目并且执行部署脚本
部署后请查看镜像,容器,网络和服务是否都启动成功,执行对应命令即可
1 2 3 4 5 6 7
| docker image ls
docker container ls
docker network ls
docker service ls
|
2.配置Nginx反向代理
1 2 3 4 5 6 7
| { server_name xxxxxxx; location / { proxy_pass http://127.0.0.1:21000; } }
|
3.通过volume进一步加速静态资源

创建数据卷
1 2
| docker volume create my-app
|
查看数据卷
1 2 3 4 5 6 7 8 9 10 11 12
| 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,通过过滤筛选条件将带后缀名的文件从数据卷中读取
1 2 3 4 5 6 7 8 9 10
| server_name xxxxxxx;
location ~* ^/(.*\.[^/]*)$ { alias /data/docker/volumes/my-app/_data/$1; }
location / { proxy_pass http://127.0.0.1:21000; }
|