docker 部署前端应用

soumsbo
1,165 阅读4分钟

一、准备工作

  1. 服务器购买 大家可以等到双11各大平台搞活动或者新人用户去白嫖。
  • 服务器简介 我购买的是阿里云的ECS云服务器，从控制台进入到云服务器ECS，直接看概览，可见面板内容如下。

image.png

  • 修改服务器密码

image.png

  • 设置安全组（影响服务器对外暴漏端口，一定要设置） 进入安全组配置 操作如下图：

image.png

  • 点击配置规则

image.png

  • 点击快速添加

image.png 这里列出了常用的对外端口，记得勾选SSH(22),方便后面使用SSH连接工具。 image.png 选中所需端口后，确定即可。至此，安全组配置完毕。
2. 配置Xshell工具或secureCRT工具
这里我使用的是secureCRT工具，点击crt工具的Quick Connect，配置如下，Hostname为实例的公网IP,Port就是22，用户名根据自己设定的配置，我使用默认的root. Authentication只配置了密码。 其他如下图。这样我们就可以通过SSH工具进行服务器的访问了。

image.png 2. docker 介绍 3. nginx介绍

二、服务器资源配置

  1. docker 简介
    ...
  2. 安装docker：sudo yum -y install docker-ce

docker有CE版本和SE版本，这里使用CE版本，其他docker知识这里不过多赘述。 docker安装成功后我们就有了部署的基础。

  1. nginx简介
    ...
  2. 安装nginx镜像。docker pull nginx

后面章节配置跨域代理、负载均衡使用。

  1. node简介 ...
  2. 安装node镜像。docker pull node

后面章节做后台服务器依赖。

三、前端项目配置

  1. 使用 create-react-app创建一个基础的项目。
  2. 基于章节2.2，接下来做nginx相关配置。
  • 在项目根目录下创建Dockerfile文件,配置如下：
 FROM nginx
 COPY build/ /usr/share/nginx/html/
 COPY nginx_conf/default.conf /etc/nginx/conf.d/default.conf
 expose 80

FORM nginx: 基于nginx镜像拉取
COPY build/ /usr/share/nginx/html/: 复制build下文件到/usr/share/nginx/html/下
COPY nginx_conf/default.conf /etc/nginx/conf.d/default.conf:同样复制操作。 EXPOSE 80 暴漏80端口 这里 COPY 只复制不解压，另一个相似命令ADD：复制到指定文件位置并解压。

  • 项目路根目录下新建nginx_config文件夹，并新建default.conf文件（nginx配置文件），配置如下
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;
    }
}
  • 执行npm run build生成项目打包文件。 此时项目根目录会出现build文件夹，里面是打包后的静态资源。

由于只是演示部署过程，真正实现的过程不需要提前打包静态资源，需要在镜像中加入复制package.json文件操作和执行 npm install操作

  • 项目根目录下新建reactimages文件，并将上面的build、Dockerfile、nginx_conf复制到该文件下、执行打包命令tar zcvf /Users/yuhaibo/Downloads/reactImages.tar.gz reactImages/
  • 将刚刚打包reactImages.tar.gz文件上传至服务器

image.png 上传后将文件解压：tar xvzf reactImages.tar.gz,解压后生成reactImages文件夹

image.png

四、部署前端应用

  1. 构建react应用镜像
  • 登录服务器，进入reactImages文件夹下，执行：docker build -t reactapp .
  • 查看新建的镜像：docker images

image.png 2. 启动react app

  • 执行命令：
docker run -p 3000:80 -d --name reactAppNew reactapp
  • dicker run 启动容器
  • -p 3000:80 宿主机3000端口映射服务器80端口
  • --name reactAppNew reactapp 基于reactapp镜像创建reactAppNew容器
  • 查看当前容器
docker ps | grep 'react'

image.png 3. 浏览器访问公网IP:3000即可看到本地是可以看到前端页面

image.png 至此，前端应用部署成功。

五、部署后端接口服务（node）

  1. 新建一个文件夹 express
  • 新建Dockerfile
  • 新建package.json
  • 新建server.js
  • 新建.dockerignore

image.png 2. 编写package.json 文件

{
  "name": "node server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "nodemon server.js"
  },
  "author": "onbing",
  "dependencies": {
    "express": "~4.13.3",
    "nodemon": "~1.8.1"
  }
}
  1. 编写server.js 文件
'use strict';

const express = require('express');

const PORT = 8080;
const HOST = '0.0.0.0';

const app = express();
app.get('/', (req, res) => {
    res.send('Hello world\n');
});

app.get('/json', (req, res) => {
    res.json({
        code: 0,
        data :'This is message from node container'
    })
});

app.listen(PORT, HOST);
console.log("Running on http://" + HOST +":"+PORT);
  1. 编写Dockerfile 文件
FROM node

WORKDIR /opt/express

COPY package*.json ./

RUN npm install --registry=https://registry.npm.taobao.org

COPY . .

EXPOSE 8080
CMD [ "npm", "start" ]
  1. 编写.dockerignore 文件
node_modules
  1. 构建node服务镜像
docker build -t nodewebserver .

image.png

  1. 运行node服务容器
docker run -p 5002:8080 -d --name nodeserver nodewebserver
  • 查看容器状态
docker ps

image.png

  • 浏览器访问公网IP:5002/json

image.png 可以看到后台服务容器已经正常启动了。

六、跨域转发

  1. 想要将前端容器服务的接口调用转发到node后台容器服务上，就必须知道node容器的ip地址。
  • 进入docker容器内部：docker exect -it [CONTAINER ID] bash
  • 查看docker容器IP：cat /etc/hosts. 或 docker inspect [CONTAINER ID]

image.png 2. 跨域配置,修改nginx配置文件

server {
    ...其他配置
   location /api/ {
      rewrite  /api/(.*)  /$1  break;
      proxy_pass http://172.17.0.5:8080;
   }
    ...其他配置
}

七、配置优化

  • 为了避免每次配置更新都需要重新创建一个镜像和容器，我们将配置改为挂载的方式，这样每次文件变动只需要执行一次命令即可。
docker run -p 3000:80 -d --name reactAppnew 
--mount type=bind,source=/opt/reactImages/nginx_conf,target=/etc/nginx/conf.d 
--mount type=bind,source=/opt/reactImages/build,target=/usr/share/nginx/html nginx

八、配置负载均衡

按照目录五介绍再次创建多个node容器服务并获取服务ip。

  • 修改ngonx.conf文件
server {
   ...其他配置
   location /api/ {
      rewrite  /api/(.*)  /$1  break;
      proxy_pass http://backend;
   }
    ...其他配置
}

upstream backend {
      server 172.17.0.2:8080;
      server 172.17.0.3:8080;
      server 172.17.0.5:8080;
  }
avatar
文章
阅读
粉丝