/app目录下有 frontend文件夹,里面是前端代码以及docker-compose.yml文件 帮我在frontend写一个脚本,执行npm install 跟npm run build:prod 然后在frontend文件夹中的Dockerfile文件中执行该脚本,并且使用nginx转发npm run build:prod打包生成的dist里的内容,80端口 请帮我编写docker-compose.yml、Dockerfile以及脚本
时间: 2024-04-15 15:31:17 浏览: 134
好的,我帮你编写docker-compose.yml、Dockerfile以及脚本。
首先是docker-compose.yml文件内容如下:
```yaml
version: '3'
services:
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
ports:
- 80:80
depends_on:
- nginx
nginx:
image: nginx:latest
ports:
- 80:80
volumes:
- ./frontend/dist:/usr/share/nginx/html
```
接下来是Dockerfile文件内容如下:
```Dockerfile
# 使用node镜像作为基础镜像
FROM node:14.17.0-alpine as build
# 设置工作目录
WORKDIR /app
# 将package.json和package-lock.json复制到工作目录
COPY package*.json ./
# 安装依赖
RUN npm install
# 将所有文件复制到工作目录
COPY . .
# 执行npm run build:prod命令
RUN npm run build:prod
# 使用nginx镜像作为基础镜像
FROM nginx:latest
# 将dist目录中的文件复制到nginx的默认静态文件目录
COPY --from=build /app/dist /usr/share/nginx/html
# 暴露80端口
EXPOSE 80
# 容器启动时运行nginx命令
CMD ["nginx", "-g", "daemon off;"]
```
最后是脚本(script.sh)内容如下:
```bash
#!/bin/bash
# 进入frontend目录
cd frontend
# 安装依赖
npm install
# 执行npm run build:prod
npm run build:prod
```
请确保在frontend文件夹下已经有package.json和package-lock.json文件,并且已经安装了npm和Docker。然后在frontend文件夹中执行以下命令:
```bash
chmod +x script.sh
./script.sh
```
这样脚本会执行npm install 和 npm run build:prod命令。
最后,在/app目录下执行以下命令启动服务:
```bash
docker-compose up -d
```
这样就完成了在frontend文件夹中执行npm install 和 npm run build:prod,并且使用nginx转发打包生成的dist目录内容的配置。
阅读全文