Docker+Nginx部署Angular

在部署Angular生产环境之前,需要电脑已经安装docker。

添加Dockerfile
在已经完成的Angular项目的项目根目录下添加Dockerfile文件。

 

Dockerfile文件内容:

FROM nginx:1.11-1.11-alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

编译Angular
ng build --prod
此时会在项目目录下生成dist文件夹,里面是我们项目打包之后的文件。

然后将Dockerfile文件复制到dist目录下,并修改。

FROM nginx:1.11-1.11-alpine
COPY . /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后进入dist目录下

cd dist

创建docker镜像
docker build -t angular5
查看当前所有镜像和运行的容器
docker images

# 显示结果

REPOSITORY TAG IMAGE ID CREATED SIZE
nginx latest c5c4e8fa2cf7 5 days ago 109MB
angular5 latest 3c493d859707 10 days ago 55.6MB
nginx 1.11-alpine bedece1f06cc 12 months ago 54.3MB

docker ps
# 显示结果
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES

运行镜像
端口不要和本地端口冲突,比如如果8082被使用,请更换
docker run -d --name demo1 -p 8082:80 angular5
# 成功结果
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
bddc01ddf0a3 nginx "nginx -g 'daemon of…" 1 minutes ago Up 3 seconds 0.0.0.0:8082->80/tcp demo1

浏览器访问:127.0.0.1:8082即可访问。

停止运行
docker stop bddc01ddf0a3 # 这个是id可以使用前几位,或者使用NAMES demo1
启动一个容器
docker ps -a #查看所有容器
docker start bddc01ddf0a3 #或者名字


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值