单页面应用的静态资源
一般的单页面应用通过npm run build
打包成静态文件,再通过nginx 配置,就可以访问了。
以部署 vue-vite-test
单页面应用为例,使用npm run build
,静态资源目录是/dist
创建dockerfile
FROM node:14-alpine
WORKDIR /app
COPY package.json package-lock.json /app
RUN npm install
COPY . /app
RUN npm run build
CMD npx serve -s dist
EXPOSE 3000
构建体积优化
FROM node:14-alpine as builder
WORKDIR /app
COPY package.json package-lock.json /app
RUN npm install
COPY . /app
RUN npm run build
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder app/dist /usr/share/nginx/html
创建docker-compose.yaml
version: "3"
services:
route:
build:
context: .
dockerfile: app.Dockerfile
ports:
- 3000:80
创建nginx.conf
server{
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
expires -1;
}
location /assets {
expires 1y;
}
}
使用docker-compose up --build
进行构建
访问 http://localhost:3000
,就可以看到页面了。
网友评论