Docker+Nginx部署Angular

最新推荐文章于 2025-07-18 16:18:52 发布

FlyWine

最新推荐文章于 2025-07-18 16:18:52 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： docker 文章标签： angular部署 docker部署angular nginx+docker部署angular nginx配置angular

本文链接：https://blog.youkuaiyun.com/wf19930209/article/details/79867727

docker 专栏收录该内容

29 篇文章

订阅专栏

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;"]

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 #或者名字