Docker+Nginx打包部署前后端分离步骤实现

下面是“Docker+Nginx打包部署前后端分离步骤实现”的完整攻略。

1. 准备工作

在开始部署前，需要先准备好以下工作：

• 前端项目代码：使用Vue、React、Angular等框架开发的前端项目代码。
• 后端项目代码：使用Node.js、Spring等框架开发的后端项目代码。
• Docker环境：需要安装好Docker，并掌握基本的Docker使用方法。

2. 打包前端项目

在开始部署前，需要先将前端项目代码打包成静态文件，以便后续能够将其部署到Nginx中。

以Vue为例，可以在项目根目录下运行以下命令进行打包：

npm run build

执行完该命令后，会在项目根目录下生成一个dist目录，里面包含了打包后的静态文件。

3. 打包后端项目

与前端项目类似，需要将后端项目代码打包成可执行的jar包或者node包。

以Spring Boot为例，可以在项目根目录下运行以下命令进行打包：

./mvnw package

执行完该命令后，会在项目根目录下生成一个target目录，里面包含了打包后的jar包。

4. 编写Dockerfile文件

编写Dockerfile文件是将前后端项目打包成Docker镜像的关键步骤。

以下是一个示例的Dockerfile文件，其中包含了将前端静态文件和后端jar包复制到镜像中，并配置Nginx反向代理的相关指令：

# 基于OpenJDK8镜像构建Docker镜像
FROM openjdk:8-jdk-alpine

# 指定工作目录
WORKDIR /webapp

# 将前端静态文件复制到镜像中
COPY ./dist /webapp/frontend

# 将后端jar包复制到镜像中
COPY ./target/*.jar /webapp/backend.jar

# 安装Nginx
RUN apk add --update nginx && rm -rf /var/cache/apk/*

# 必要的一些文件和目录创建
RUN mkdir -p /run/nginx
RUN touch /run/nginx/nginx.pid
RUN mkdir -p /var/log/nginx

# 替换Nginx默认配置
COPY ./nginx.conf /etc/nginx/nginx.conf

# 暴露80端口
EXPOSE 80

# 启动Nginx和后端数据服务
CMD ["sh", "-c", "java -jar backend.jar & nginx -g 'daemon off;'"]

5. 建立Docker镜像

通过Dockerfile文件，运行以下命令来创建Docker镜像：

docker build -t myapp:v1 .

其中，myapp是镜像的名称，v1是版本号，.表示Dockerfile文件在当前目录下。

6. 运行Docker容器

运行以下命令来启动Docker容器：

docker run -p 80:80 myapp:v1

其中，-p 80:80表示将容器的80端口映射到主机的80端口上。

7. 验证部署效果

访问http://localhost，如果一切正常，应该会看到前端项目的界面。同时，可以通过http://localhost/api访问后端数据服务。

示例说明

示例一：使用React和Spring Boot构建网站

以React为例，可以使用create-react-app脚手架创建一个React项目：

npx create-react-app my-app

打包React项目：

cd my-app

npm run build

以Spring Boot为例，可以使用Spring Initializr创建一个Spring Boot项目：

创建项目后，使用以下命令进行打包：

./mvnw package

在项目根目录下创建Dockerfile文件，复制前端静态文件和后端jar包到镜像中：

FROM openjdk:8-jdk-alpine

WORKDIR /webapp

COPY ./my-app/build /webapp/frontend
COPY ./target/*.jar /webapp/backend.jar

RUN apk add --update nginx && rm -rf /var/cache/apk/*

RUN mkdir -p /run/nginx
RUN touch /run/nginx/nginx.pid
RUN mkdir -p /var/log/nginx

COPY ./nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["sh", "-c", "java -jar backend.jar & nginx -g 'daemon off;'"]

然后使用以下命令创建Docker镜像：

docker build -t myapp:v1 .

最后运行Docker容器：

docker run -p 80:80 myapp:v1

访问http://localhost，即可查看网站。

示例二：使用Vue和Node.js构建网站

以Vue为例，可以使用Vue CLI创建一个Vue项目：

vue create my-project

打包Vue项目：

cd my-project

npm run build

以Node.js为例，可以在项目根目录下使用以下命令创建一个Node.js项目：

npm init

然后编写服务器端代码，并使用以下命令将其打包：

npm run build

在项目根目录下创建Dockerfile文件，复制前端静态文件和后端node.js包到镜像中：

FROM node:alpine

WORKDIR /webapp

COPY ./dist /webapp/frontend
COPY ./backend/dist /webapp/backend

RUN apk add --update nginx && rm -rf /var/cache/apk/*

RUN mkdir -p /run/nginx
RUN touch /run/nginx/nginx.pid
RUN mkdir -p /var/log/nginx

COPY ./nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["sh", "-c", "cd backend && node index.js & nginx -g 'daemon off;'"]

然后使用以下命令创建Docker镜像：

docker build -t myapp:v1 .

最后运行Docker容器：

docker run -p 80:80 myapp:v1

访问http://localhost，即可查看网站。