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