Docker+Nginx 部署Vue+Element前端項目

准備工作

（1）安裝nginx鏡像

docker pull nginx

（2）查看nginx鏡像

 docker images

 

 

部署項目

 （1）生成vue項目

npm run build

（2）創建 Nginx Config配置文件

        在項目根目錄下創建 Nginx 文件夾，該文件夾下新建文件 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;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

#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   /usr/share/nginx/html;
}
}

該配置文件定義了首頁的指向為 /usr/share/nginx/html/index.html，所以我們可以一會把構建出來的 index.html 文件和相關的靜態資源放到 /usr/share/nginx/html 目錄下。

（3）創建 Dockerfile 文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

• 自定義構建鏡像的時候基於 Dockerfile 來構建。
• FROM nginx 命令的意思該鏡像是基於 nginx:latest 鏡像而構建的。
• COPY dist/ /usr/share/nginx/html/ 命令的意思是將項目根目錄下 dist 文件夾下的所有文件復制到鏡像中 /usr/share/nginx/html/ 目錄下。
• COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將 Nginx 目錄下的 default.conf 復制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置來替換 Nginx 鏡像里的默認配置。

 （4）基於該 Dockerfile 構建 Vue 應用鏡像

         運行命令（注意不要少了最后的 “.” ）：

docker build -t vue .

-t 是給鏡像命名，. 是基於當前目錄的 Dockerfile 來構建鏡像。

查看本地鏡像，運行命令：

docker image ls | grep vue

 

 到此時我們的 Vue 應用鏡像 vue 已經成功創建。接下來，我們基於該鏡像啟動一個 Docker 容器。

docker run  -p 80:80  -d --name vuecontains  vue

• docker run 基於鏡像啟動一個容器
• -p 80:80 端口映射，將宿主的80端口映射到容器的80端口
• -d 后台方式運行
• --name 容器名，查看 Docker 進程

docker ps

 

 可以發現名為 vuecontains 的容器已經運行起來。此時訪問 http://server 應該就能訪問到該 Vue 應用：