docker部署前端项目

docker部署前端项目

1. 安装docker nginx

# 安装docker 官网下载不赘述
# 查看docker是否安装
docker info 
# docker 安装nginx
docker pull nginx

2. 新建docker/niginx配置文件

# 新建docker-web文件夹，新建Dockerfile文件, 
# 新建nginx文件夹,新建default.conf文件,新建index.html文件
mkdir docker-web
cd docker-web
mkdir Dockerfile
mkdir nginx
cd nginx 
mkdir default.conf
vi default.conf
cd ../
# 新建docker运行脚本
touch dockerapp.sh

#default.conf文件配置
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    # 生成的docker镜像中前端代码位置
    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

# Dockerfile文件配置   引入nginx
FROM nginx

# 创建sh命令脚本  dockerapp.sh
# /Users/admin/workspace/code/docker-web/nginx   nginx配置，前端页面从宿主机拷贝至镜像容器
# --name 容器命名
docker run 
-p 4004:80 
-d --name vuenginxnew 
--mount type=bind,source=/Users/admin/workspace/code/docker-web/nginx,target=/etc/nginx/conf.d 
--mount type=bind,source=/Users/admin/workspace/code/docker-web/dist,target=/usr/share/nginx/html 
nginx

3. 执行脚本 sh dockerapp.sh

这样就能每次修改了nginx配置或者重新构建了前端应用的时候，只需重启容器docker restart dockerid就能立马生效。 此时我们再访问 http://localhost:4004/就能 看到我们的页面更新。

使用到的docker命令

# 生成镜像
docker build -t vuenginxcontainer2 .
# 启动docker镜像
docker run -p 4000:80 -d --name vueApp3 vuenginxcontainer2
# 查看docker镜像列表
docker images
#  删除docker镜像
docker rm -f (dockerId)
# 查看正运行的docker镜像
docker ps -n 5
# 关闭正运行的docker镜像
docker stop (dockerId)
# 查看本地镜像
docker image ls | grep vuenginxcontainer2

# 启动docker容器中的ngnix
docker run --name nginx -p 80:80 -d nginx
# 进入docker镜像nginx（容器）配置
docker exec -it nginx bash

# 进入docker镜像（容器）查看nginx配置
docker exec -it vuenginxcontainer2 bash

# docker热更新dist下的代码
docker run -p 4003:80 -v /Users/admin/workspace/code/docker-web/dist:/usr/share/nginx/html  -d  dockervue3

使用到的ngnix命令

# 编辑nginx配置 
vim /usr/local/etc/nginx/nginx.conf
# nginx重新加载配置文件
nginx -s reload
# 重新加载日志:
nginx -s reopen

# 停止 nginx 
nginx -s stop
# 有序退出 
nginx nginx -s quit
# 启动nginx     
sudo nginx
# 关闭nginx服务 
sudo nginx -s stop