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


  • 相关阅读:
    php冒泡排序和快速排序
    在thinkphp中js文件添加路径
    cookiesession
    搭建nginx环境(参考腾讯云实验室)
    验证码快速刷新
    使用Word发送,测试一下
    c++ DLL和c#之间传递字符串
    如何使CEF支持Flash
    如何在Windows上从源码编译Chromium (CEF3) 加入mp3支持
    C#在Linux+Mono环境中使用微信支付证书
  • 原文地址:https://www.cnblogs.com/jiangzhaowei/p/10027644.html
Copyright © 2020-2023  润新知