ファイル作成編｜VercelとDenoでサーバーレス関数を作ってみる
必要なソフトウェアは前のページに書いてあるので、予め参照しておくこと
今回の手順でGitを扱うけれど、それまで取り上げると長くなるので、詳細な方法は書かない というか、Mijinko_SD.iconはファイル作成しか書くつもりがないので、これ以外の細かいコマンドについてもあんまり書かない
主に必要なファイル・ディレクトリ
.git/
api/
必ずapiという名前にする必要がある
public/
必ずpublicという名前にする必要がある
これを作成しなかった場合は、ルートディレクトリがpublicと同じ扱いになる
public/*のファイルはWeb上からは/*でアクセスできる
.gitignore
Gitのリポジトリに上げないファイルを書き込むファイル .vercelignore
このファイル内でDenoを使う設定をしたり、apiディレクトリ以下のファイルをURLのルートパスに持ってきたりするので、結構大事 ファイルを作成する
各種ファイルを作成する
1. api/の中にindex.tsを作成する
後の設定でapi/以下がWeb上のルートパスになるので、何もパスを入れなかった際はこのファイルにアクセスされる
2. その中身を以下のようにする
code:index.ts
/// <reference no-default-lib="true" />
/// <reference lib="es2022" />
/// <reference lib="dom" />
export default (req: Request) => {
const htmlBody = "<p>Hello World!<p>";
return new Response(htmlBody, { headers: { "content-type": "text/html" } });
};
5行目の関数：
ファイルにアクセスされた際に呼び出される関数
7行目：クライアント側のブラウザに返すレスポンス
code:vercel.json
{
"functions": {
"runtime": "vercel-deno@3.0.1"
}
},
"rewrites": [
{
"source": "/public/:path(.*)",
"destination": "/public/:path"
},
{
"source": "/:path(.*)",
"destination": "/api/:path"
}
],
"github": {
"silent": true
}
}
詳しいことは以下のページを参照
12~15行目：URLパスのルートをapi/以下に割り当てる設定 8~11行目：12~15行目の設定でpublicディレクトリ以下にアクセスできなくなるのを防ぐための設定
code:.gitignore
.vercel
code:.vercelignore
/*
!api
!public
!vercel.json
自分の環境でテストしてみる
$ pnpm add -g vercel
$ yarn global add vercel
$ npm install -g vercel
上記のどれか1つを実行するだけでいい（複数個実行すると面倒なことになりかねないのでやらないで）
3. しばらくするとReady!（準備完了！）と表示されるので、下に表示されたURLにブラウザからアクセスしてみる
https://gyazo.com/37f679d9f8208b792ca2e16864a54b35
https://gyazo.com/e3483f255ef31ca6240bb1c380709ef9
うまく成功したならば、index.tsのhtmlBody（6行目）の中身を書き換えて、表示を変えてみよう
ファイルを保存した後に、ブラウザ側を再読み込みすれば反映される
確認が終わったら、コンソール側でCtrl+Cを入力してサーバーを終了する