概要

このエントリでは、個人デモ用サイトをQoveryにデプロイして動かしてみた話を紹介します。

想定読者

このエントリは、以下のニーズがある方を対象としています。

自分で書いたコードのデモを動かすサイトをどこかでホストしてほしい、というニーズがある
サイトは（今時なので）HTTPSがいい
Qoveryって何？という方

TL;Dr;

以下ができました。

（今（2021年10月）のところ無料の範囲で）JavaScriptで書いたコードの個人デモ用サイトを立ち上げる
独自ドメインでHTTPSでアクセス
GitHubでコードを変更するとサイトも自動でビルドされて更新

エントリの動機

別エントリ「FizzBuzz を処理できるSchemeっぽい処理系をJavaScriptで書いてみる」で紹介したようなプログラムを書いているのですが、JavaScriptで書いていることもあり、WEB上でもお試しできるようにしたいと思っていました。

以下の理由で、NuxtのStatic Site Generationでデモサイトを作ることにしました。

JavaScriptのコードを動かすだけなのでWEBサイトはクライアント側で完結するもので充分、だけどもしかするとAPIも書きたくなるかもしれないのでサーバ側も作れそうな構えにしておきたい
動かしたいコード以外は、何かのテンプレートを使ってでラクをしたい、それ以外もいろいろラクしたい
Next.jsでもNuxt.jsでもStatic Site Generationができるので、ここは__使ったことがなかったNuxtを使ってみたい__

Nuxtのサイトの「Integrations」のページには、Nuxtで書いたものを動かす先の例として20個以上上がっていたりしますが、このエントリではQoveryを使う場合の方法に従って進めてみることにします。

補足

前述の理由だけだと、ファイルを置いておくだけの普通のホスティングサービス（例えばGitHub Pagesとか）お手軽なのではないか、という気もしますが、"サーバ側も作れそうな構えにしておきたい"といったあたりの理由でその方法はとりませんでした。現時点のデモだけでいうと、全然十分だったりはするんですが。

説明

基本的な流れは、前述のNuxtのサイトのQoveryを使う場合の方法の通りです。記事執筆時点のページの一部を下記に引用します。

以下、上記サイトの流れに従って進めます。

Qoveryにアカウントを作る

(Nuxtのサイトの記載はこちら)

筆者はQoveryのアカウントを持っていなかったため、新規にアカウントを作りました。

GitHubアカウントと連携する

今回作っているサイトの資源はGitHubに格納してあるため、GitHub連携の方を選びます。

認可する範囲を決める

記事執筆時点では、下記に引用するアクセス権が求められました。readはいいとしてwriteはちょっと。。。とも思いましたが、ここは勇気と好奇心をもってAuthorizeしました。

プラン

Qoveryのアカウント作成時は、以下2つから選択できます。このエントリでは「Free Hosting」で進めます。

Deploy on your cloud account
Free Hosting

(補足：Deploy on your cloud accountの方は、ざっくり理解では、Herokuみたいな使い勝手で、バックエンドをAWSとかの自分の環境に置けちゃう感じ、です。アプリをいろいろな環境にデプロイ、という観点ではTerraform的でもあります。比較観点は、Qoveryのサイトにそれぞれ記述がありました。vs Heroku, vs Terraform Terraformは、"vs"ではなくて、"on top of"に作ってあって、目線がAP開発者とかユーザ寄り、な感じです。vs Netlifyの観点で言うと、まあ似てるっちゃ似てるんですが、バックエンドを自分のAWSアカウントで作れるというところで違いが出てきそうです。)

"Free"なものの常ですが、いつまでも無料であることを保証するものではない、とのこと。
（このエントリは、2021年10月時点のものであることにご注意ください）

Organizationの作成

アカウントを大きく分ける単位であるところの「Organization」を作ったら、アカウント作成はおしまいです。説明文を入れる程度の作業でした。

Projectを作る

(Nuxtのサイトの記載はこちら)

「Create new project」を押して

名前をつければおしまいです。

Projectの中には、Environmentを作り、その中にApplicationを作ります。

「Create Environment」を押して名前を付けると、Environmentが出来ます。

これで、Applicationをデプロイする準備ができました。

Applicationをデプロイする

(Nextのサイトの記載はこちら)

Applicationが格納されたリポジトリとブランチを選ぶ

このエントリでは、「hrkt/fbs-web」というリポジトリに格納されたWEBアプリ（で出力される静的サイト）を対象としています。

デプロイに使うビルドツールは、「Buildpacks」または「Dockerfile」が選択できます。このエントリではDockerfileを使います。

Dockerfile、Port

(Quveryのサイトにあったサンプルを参考にしつつ)下記のようなDockerfileを書きました。2ステージのビルドにしてあり、ステージ1では、Nuxtで書いたWEBアプリを静的ファイルにgenerateします。ステージ2では、generateしたファイルをNginxのcontent-rootにコピーして、コンテナ起動時にNginxが起動するようにしています。

### STAGE 1: Build ###
FROM node:14-alpine as build

RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

RUN apk update && apk upgrade

COPY . /usr/src/nuxt-app
RUN npm install --silent

RUN npm run generate

### STAGE 2: NGINX ###
FROM nginx:stable-alpine

COPY --from=build /usr/src/nuxt-app/dist /usr/share/nginx/html

EXPOSE 80

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

コンテナの記述に合わせ、この設定でQoveryのサービス間に公開するポートを指定します。

「Create」を押すと、Applicationの定義ができます。

デプロイ前の設定

公開ポート

アプリケーションからインターネットに公開するポートを設定します。
（注：エントリ執筆時点ではここがいまいちよくわかっていないのですが、"80"を指定しておくと、qoveryのリリバースプロキシでHTTPS側にリダイレクトしてくれる動きに見えます。フリーのホスティングならではの設定なのかもしれません。AWSに配備するときなどはまた違うのかも、と思いつつ、動いているのでこれで良しとしました。）

カスタムドメインの設定

(Nuxtのサイトの記載はこちら)

Applicationを公開ポート付きでデプロイすると、デフォルトで「https://xxxxxx.qovery.io」のURLでインターネットからアクセスできるようになります。それに加えて、独自ドメイン名でのアクセスにも対応することができます。（独自ドメインのDNSの設定は、筆者はDNS業者側のサイトで実施しました。）

ApplicationにアクセスするためのURLは、Applicationの設定メニュー中の「Open」からも確認できます。

デプロイ

実行

ここまでの準備ができれば、あとはメニューの「ACTIONS」から「Deploy」を選べば、一連の作業が始まります。

しばらく待つ

作ったデモアプリのビルドにはそれなりに時間がかかるので、ログを鑑賞したりコーヒーを取りに行ったりして待ちます。

カスタムドメインのさらにしばらく待つ

(Nuxtのサイトの記載はこちら)

カスタムドメイン側の設定もQoveryが実施してくれるので、反映までしばらく待ちます。
証明書は、Qoveryが、Let's Encryptを使って作ってくれます。便利。

（注）このステップは、反映されるまで、気を長く待ちましょう。デプロイ直後、独自ドメイン用の証明書の更新が終わっていない状態でも独自ドメインからアクセスすることもでき（xxxx.qovery.io側では証明書は有効な情チア）ますが、ブラウザの見た目上「安全でないサイト」になる時期があります。

おわりに

本エントリでは、Nuxtで作った静的サイトをPaaSの"Qovery"でホスティングした手順について紹介しました。

少ない手間でデモサイトが作れたので、個人的には満足な試行でした。

参照先