如何优雅的打包前端代码

2020-08-04T20:31:27
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

我们下面以VUE为例。这里提供一个仓库vue-docker-demo,供大家测试。

首先我们使用vue脚手架初始化一个项目。

vue create vue-docker-demo

接下来我们初始化 Hyperf 项目,这里为了方便讲解,后端项目也一同上传到这一个仓库中。

composer create hyperf/biz-skeleton hyperf

修改 Hyperf 项目,方便测试

新建UserController控制器

<?php

declare(strict_types=1);

namespace App\Controller;

class UserController extends Controller
{
    public function info(int $id)
    {
        return $this->response->success([
            'id' => $id,
            'name' => 'Hyperf',
        ]);
    }

    public function update(int $id)
    {
        $name = $this->request->input('name');

        return $this->response->success([
            'id' => $id,
            'name' => $name,
        ]);
    }
}

添加路由

<?php

Router::get('/user/{id:\d+}', 'App\Controller\UserController@info');
Router::post('/user/{id:\d+}', 'App\Controller\UserController@update');

添加单元测试

<?php

declare(strict_types=1);

namespace HyperfTest\Cases;

use HyperfTest\HttpTestCase;

/**
 * @internal
 * @coversNothing
 */
class UserTest extends HttpTestCase
{
    public function testUserInfo()
    {
        $res = $this->get('/user/1');

        $this->assertSame(0, $res['code']);
        $this->assertSame(['id' => 1, 'name' => 'Hyperf'], $res['data']);
    }

    public function testUserUpdate()
    {
        $res = $this->json('/user/1', [
            'name' => 'limx',
        ]);

        $this->assertSame(0, $res['code']);
        $this->assertSame(['id' => 1, 'name' => 'limx'], $res['data']);
    }
}

跑一下接口测试

$ composer test
> co-phpunit -c phpunit.xml --colors=always
Detected an available cache, skip the app scan process.
Detected an available cache, skip the vendor scan process.
[DEBUG] Event Hyperf\Framework\Event\BootApplication handled by Hyperf\Di\Listener\BootApplicationListener listener.
[DEBUG] Event Hyperf\Framework\Event\BootApplication handled by Hyperf\Config\Listener\RegisterPropertyHandlerListener listener.
[DEBUG] Event Hyperf\Framework\Event\BootApplication handled by Hyperf\Paginator\Listener\PageResolverListener listener.
PHPUnit 7.5.16 by Sebastian Bergmann and contributors.

...                                                                 3 / 3 (100%)

Time: 309 ms, Memory: 16.00 MB

OK (3 tests, 14 assertions)

改造 VUE 项目

我前端水平有限,所以就写点简单的测试,主要是为了试验Dockerfile

使用NPM安装axios

npm i axios -S

添加 request.js

import axios from 'axios'

export default {
    async request(method, url, params) {
        const BASE_URI = '/api';

        return axios({
            method: method,
            url: `${BASE_URI}${url}`,
            data: params,
        });
    }
}

修改HelloWorld.vue,以下只展示修改后的部分

<script>
    import request from "../api/request";

    export default {
        name: 'HelloWorld',
        messaage: '',
        props: {
            msg: String
        },
        async mounted() {
            var data = await request.request('GET', '/user/1');
            // eslint-disable-next-line no-console
            console.log(data);

            var res = await request.request('POST', '/user/1', { name: "limx" });
            // eslint-disable-next-line no-console
            console.log(res);
        }
    }
</script>

添加 Dockerfile 和 app.conf

首先,当nginx拿到/api前缀后,转发到对应的后端服务,所以这里需要提供一份app.conf配置

server {
    listen  80;
    root    /usr/src/app/dist;
    index   index.html;
    client_max_body_size 8M;

    proxy_set_header    Host                $host:$server_port;
    proxy_set_header    X-Real-IP           $remote_addr;
    proxy_set_header    X-Real-PORT         $remote_port;
    proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;

    location /api/ {
        proxy_pass  http://biz-skeleton:9501/;
    }
}

接下来是我们的Dockerfile,逻辑其实很简单,我们先通过node环境进行打包,然后再copynginx环境下即可。

FROM node:10-alpine as builder

WORKDIR /usr/src/build

ADD package.json /usr/src/build
ADD package-lock.json /usr/src/build
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org && cnpm install

COPY . /usr/src/build
RUN npm run-script build

FROM nginx:alpine

COPY --from=builder /usr/src/build/dist /usr/src/app/dist
COPY --from=builder /usr/src/build/app.conf /etc/nginx/conf.d/

ENTRYPOINT ["nginx", "-g", "daemon off;"]

打包测试

首先进入我们Hyperf目录,打包后端服务

cd hyperf
docker build . -t biz-skeleton:latest

然后打包我们的前端代码

docker build . -t vue-demo

创建网关,如果已经创建过,可以忽略这里,并使用创建过的网关

$ docker network create \
--subnet 10.0.0.0/24 \
--opt encrypted \
--attachable \
default-network

接下来,让我们把两个项目都跑起来

docker run -p 9501:9501 --name biz-skeleton --network default-network --rm -d biz-skeleton:latest
docker run -p 8080:80 --name vue-demo --network default-network --rm -d vue-demo:latest

然后通过浏览器访问http://127.0.0.1:8080/

就可以看到我们的测试结果在终端中输出了。

发布

项目发布这里就不再赘述了,需要了解的就去看一下DockerSwarm集群搭建,有全自动的打包发布方案,教程就在Hyperf官方文档中。

这里需要额外提一下的是,打包好的静态文件,每次都走服务器公网流量是很浪费的,这里推荐大家使用CDN,然后配一个回源,可以大大减少流量的压力。当然,回源策略那里要注意一下,把接口返回的数据也缓存到CDN上就不好了。

扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。