利用docker-compose部署vue项目到服务器的详细过程
时间: 2023-12-12 07:02:23 浏览: 35
1. 准备工作
在服务器上安装docker和docker-compose,具体安装方法可以参考官方文档。
2. 创建项目文件夹
在服务器上创建一个用于存放vue项目的文件夹,例如:`/home/vue-project/`。
3. 编写docker-compose文件
在项目文件夹中创建一个名为`docker-compose.yml`的文件,并编写以下内容:
```
version: '3'
services:
web:
image: node:latest
ports:
- "8080:8080"
volumes:
- ./app:/app
working_dir: /app
command: "npm run dev"
```
这个docker-compose文件定义了一个名为`web`的服务,使用最新版本的Node.js镜像,将本地的`./app`目录挂载到容器的`/app`目录,将容器的8080端口映射到主机的8080端口,最后在容器中执行`npm run dev`命令。
4. 编写Dockerfile文件
在项目文件夹中创建一个名为`Dockerfile`的文件,并编写以下内容:
```
FROM node:latest
RUN mkdir /app
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "run", "dev" ]
```
这个Dockerfile定义了一个基于Node.js镜像的Docker镜像,将容器的工作目录设置为`/app`,将本地的`package*.json`文件复制到容器中并执行`npm install`命令安装依赖,将本地的所有文件复制到容器中,将容器的8080端口暴露出来,最后在容器中执行`npm run dev`命令。
5. 构建镜像
在项目文件夹中运行以下命令构建镜像:
```
docker build -t vue-project .
```
6. 启动容器
在项目文件夹中运行以下命令启动容器:
```
docker-compose up -d
```
7. 访问应用
在浏览器中访问服务器的IP地址和端口号,例如:`http://<server_ip>:8080`,即可访问应用。