サーバーレス開発者を使用して静的WebサイトをFunctionComputeにデプロイする方法

著者|DengChaoServerlessDevsオープンソースコントリビューター

序文

同社には、オンラインでリリースする必要のあるWebサイトがいくつかあることがよくあります。いくつかの異なる製品を比較した後、Alibaba Cloudのファンクションコンピューティング（FC）を使用して構築された静的Webサイトをホストすることにしました。FC ElasticInstancesに付属する500Mbのストレージ[1]は、静的なWebサイトには多すぎます。

関数コンピューティングリソースの使用量：help.aliyun.com/document_de…

静的Webサイトをカスタムランタイム関数にデプロイする

次の構造のフロントエンドプロジェクトがあるとします。

/
├ dist/ 待部署的构建产物
│  └ index.html 
├ src/
└ package.json
复制代码

手順1.単純なHTTPサーバーを作成する

Expressを例にとると、最初にプロジェクトに依存関係を追加します。

yarn add express
复制代码

次に、新しいapp.jsを作成し、次のように記述します。

let Express = require("express");
let app = new Express();
app.use(Express.static('dist'));
 //使用 dist 文件夹中的内容对外提供静态文件访问
app.use((req, res) => { res.redirect("/"); }); 
// 重定向无法处理的请求到网站的根目录
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); }); 
// 监听 FC custom 运行时默认的 9000 端口
复制代码

この単純なExpressサーバーをノードapp.jsで起動し、http：// localhost：9000に/dist/index.htmlにアクセスできることを確認するように依頼します。

次のステップは、app.jsとdistをFunctionComputeに公開することです。

ステップ2.ブートストラップを書く

関数Computecustomruntimeでは、ユーザーがカスタムHTTPサーバーを起動するためのブートストラップファイルを提供する必要があるため、ルートディレクトリにこのファイルを作成する必要があります。

#! /bin/bash
node app.js
复制代码

最初の行の＃！/ bin / bashが必要であることに注意してください。そうでない場合、Function Computeは、スクリプトの内容を実行するために使用するインタープリターを認識しません。Windowsユーザーは、このファイルの改行文字を/ r /nから/nに変更することを忘れないでください。そうしないと、関数計算の起動タイムアウトの問題が発生します。

ステップ3.@serverless-devs / sをインストールし、s.yamlを書き込みます

@ serverless-devs/sコマンドラインツールをプロジェクトに追加します。

yarn add @serverless-devs/s -D
复制代码

次に、ルートディレクトリに基本的なs.yaml構成ファイルを作成します。

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: my-awesome-website-project
services:
  my-service: # 任意的名称
    component: devsapp/fc       # 使用 fc 组件
    props:
      region: cn-shenzhen       # 部署到任意的可用区, 例如深圳.
      service:
        name: my-awesome-websites   # 深圳可用区的 my-awesome-websites 服务
      function:
        name: www-example-com     # my-awesome-websites 服务下的一个函数
        runtime: custom        # 使用 custom 运行环境
        handler: dummy-handler     # 由于使用了 custom 运行环境, 所以这里可以随便填
        codeUri: ./          # 部署当前文件夹下的全部内容
      triggers:
        - name: http
          type: http        # 创建一个 HTTP 类型的触发器, 以便客户端可以通过 HTTP 协议进行访问
          config:
            authType: anonymous    # 允许匿名访问
            methods: [ HEAD, GET ]  # 静态网站只需要处理 HEAD 和 GET 请求就够了
复制代码

ステップ4.FunctionComputeにデプロイする

AccessKeyとAccessSecret[2]を構成した後、次のコマンドを実行します。

s deploy
复制代码

Webサイトが展開されます。

接下来就是配置自定义域名了, 配置好以后就可以通过你自己的域名访问到这个网站了。

step 5.配置自定义域名

以自定义域名 deploy-static-website-to-fc.example.dengchao.fun 为例；首先添加 CNAME 记录, 解析值填写 ${UID}.$ {REGION}.fc.aliyuncs.com. 因为我们的 s.yaml 中设置的 region 是 cn-shenzhen, 所以对应的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

ここに画像の説明を挿入

接下来设置函数计算控制台上的自定义域名: ここに画像の説明を挿入

访问一下试试看: deploy-static-website-to-fc.example.dengchao.fun(opens new window)

样本工程

本文中的样本工程已经上传到 GitHub: github.com/DevDengChao… new window)

参考及相关链接

[1] 500 Mb 存储空间 help.aliyun.com/document_de…

[2] 配置好 AccessKey 和 AccessSecret www.serverless-devs.com/serverless-…

[3] 阿里云函数计算-产品简介 help.aliyun.com/document_de…

[4] 资源使用限制 help.aliyun.com/document_de…

[5]実行環境をカスタマイズしますhelp.aliyun.com/document_de…

[6]カスタムドメイン名help.aliyun.com/document_de…を設定します

[7]サーバーレス開発者官0042www.serverless-devs.com/

サーバーレス開発者のWebサイトの詳細については、ここをクリックしてください。

クラウドネイティブテクノロジーに関する最新情報を公開し、クラウドネイティブテクノロジーの最も包括的なコンテンツを収集し、クラウドネイティブイベント、ライブブロードキャストを定期的に開催し、Alibaba製品とユーザーのベストプラクティスをリリースします。クラウドネイティブテクノロジーを一緒に探索し、必要なクラウドネイティブコンテンツを共有します。

[Alibaba Cloud Native]の公式アカウントをフォローして、クラウドネイティブに関するよりリアルタイムの情報を入手してください。