1.创建vue项目
vue create xxxx
2.vue根目录下创建.dockerignore文件
node_modules
3.vue根目录下创建目录(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;
}
#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;
}
}
4.vue根目录下创建Dockerfile文件
前端的配置(当前教程需要的)
# 指定node镜像对项目进行依赖安装和打包
FROM node AS builder
# 将容器的工作目录设置为/app(当前目录,如果/app不存在,WORKDIR会创建/app文件夹)
WORKDIR /app
COPY . /app/
RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install
RUN npm run build
#指定nginx配置项目,--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node as builder),即是把刚刚打包生成的dist放进nginx中
FROM nginx
COPY --from=builder /app/dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
#暴露容器8888端口
EXPOSE 7788
后端的配置(这个不需要,忽略)
# 指定node镜像对项目进行依赖安装和打包
FROM node
# 将容器的工作目录设置为/app(当前目录,如果/app不存在,WORKDIR会创建/app文件夹)
WORKDIR /app
COPY . /app/
RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install
#暴露容器5000端口
EXPOSE 5000
CMD [ "npm", "start" ]
5.vue根目录下创建docker-compose.yml文件(如果需要用docker-compose)
version: "2.0"
services:
web1: # 前端node容器(运行nginx中的Vue项目)
container_name: vue-demo # 容器名为''
build:
context: ./ # 指定设定上下文根目录,然后以该目录为准指定Dockerfile
dockerfile: Dockerfile
ports:
- "7788:80" # 映射端口
6.执行命令生产镜像
docker build -t xxxxx .