Docker笔记1：前端发布

 

Docker发布前端

一.Node预览

1.创建一个vue项目

 

2.修改vite.config.js文件

server: {
     host: '0.0.0.0',
     port: 5173
   }

 

3.在vue项目根目录下创建Dockerfile文件

# 基础镜像
 FROM node:latest
 # 设置项目的目录
 WORKDIR /app
 # 复制当前文件下的文件到APP中
 COPY . .
 # 运行安装项目的命令
 RUN npm install && npm run build
 # 安装完成后使用 npm 命令执行 "npm run dev"
 CMD npm run preview
 # 镜像默认暴露 4173 端口
 EXPOSE 4173

 

4.在VUE项目根目录下创建.dockerignore文件

node_modules
 dist
 .git
 .gitignore
 .vscode

 

5.在控制台运行创建镜像

docker build -t vue-demo .

 

查看镜像

 docker images

 

6.运行

docker run -itd -p 4173:4173 --name=vue-demo vue-demo

 

 

7.打开浏览器访问

 http://localhost:4173/

 

二.Node开发

1.创建一个Vue项目

 

2.修改vite.config.js文件

  server: {
     host: '0.0.0.0',
     port: 5173,
     hmr: true,
     watch: {
       usePolling: true
     }
   }

 

3.在vue项目根目录下创建Dockerfile文件

 # 基础镜像
 FROM node:latest
 # 设置项目的目录
 WORKDIR /app
 # 复制当前文件下的文件到APP中
 COPY . .
 # 运行安装项目的命令
 RUN npm install 
 # 安装完成后使用 npm 命令执行 "npm run dev"
 CMD npm run dev
 # 镜像默认暴露 4173 端口
 EXPOSE 5173

 ​
 ​

 

4.在VUE项目根目录下创建.dockerignore文件

 node_modules
 dist
 .git
 .gitignore
 .vscode

 

5.在控制台运行创建镜像

 docker run -itd -p 5173:5173 --name=vue-dev -v E:/vue/vue-project1:/app -v /app/node_modules vue-dev

 

6.运行

 

7.浏览器访问

 http://localhost:5173/

 

三.nginx发布

1.安装nginx

搜索nginx

docker search nginx

 

下载nginx

 docker pull nginx

 

创建镜像

 docker run -itd --name=nginx -p 80:80 nginx

 

浏览器访问

http://localhost:80/

 

2.创建一个vue项目

 

3.创建Dockerfile文件

 # 基础镜像
 FROM nginx:latest
 COPY dist /usr/share/nginx/html/
 CMD nginx -g 'daemon off;'
 EXPOSE 80

 ​

 ​

 

4.创建.dockerignore文件

 node_modules
 .git
 .gitignore
 .vscode

 

5.创建nginc.conf文件

 server {
     listen       ${NGINX_LISTEN_PORT};
     listen  [::]:${NGINX_LISTEN_PORT};
     server_name  localhost;
 ​
     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
     }
 ​
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   /usr/share/nginx/html;
     }
 }

 

6.打包

 npm run build

 

7.创建镜像

 docker build -t vue-nginx .

 

8.运行

 docker run -itd --name=vue-nginx -v dist:/usr/share/nginx/html -v nginx.conf:/etc/nginx/conf.d -p 80:80 vue-nginx

 

 

9.浏览器访问

 http://localhost:80/