オンプレで動くHeroku互換システムと、最新のNuxt3で『はにゃーん』を作ったった #Nuxt

『クソアプリ Advent Calendar 2021』３日目のひかる@alclimb でございます。

昨日の２日目は @nabettu さんによる『Twitterに誰でもドット絵を投下できるサービスを作ったよ』でした！(作ったドット絵をテキストとしてコピーできるって発想にシビれます)

さて、今年で２回目の参加ですが、今年はオンプレで使える Heroku 互換システムである Dokku と、今年の10月にベータ版がリリースされた Nuxt3 を使って、技術検証欲で Web サービスを作ってみました。

(1) 作ったもの概要

『はにゃーんボタン』を押すとはにゃんはにゃん喋ります。※音が出るのでご注意⚠
用途は考えて無いので、『ちょっと疲れたなー』って時にでもどうぞ。

Web サービスの内容は適当で申し訳ないのですが、でもでも、はにゃんはにゃん聞いてるのは楽しかったです。こちらからどうぞ↓

(2) システム構成

サーバー側

サーバー側には ConoHa VPS, Ubuntu, Dokku, Redis を使用しています。
Redis はカウンターのデータベースとして使用しています。

クライアント側

クライアント側には Nuxt3 を使用しています。まだベータ版なので、資料が少なく、バグなのか仕様なのか、使い方が悪いのか、非常に困惑しましたが楽しかったです。

(3) Dokku の構築方法

⚠ご注意
構築しながらメモしたもので、まだ再現試験をしておりません。この通りに作業してもどこかで躓くかも… はにゃーん🤣

あらかじめ Ubuntu 20.04 LTS を用意します。サーバー上で以下のコマンドを実行します。

# 
# (1) Dokkuホスト上での共通設定
#  - Ubuntu 20.04.2 LTS (GNU/Linux 5.4.0-65-generic x86_64)
#  - Dokku v0.26.6
# 

# Dokkuインストール
$ wget https://raw.githubusercontent.com/dokku/dokku/v0.26.6/bootstrap.sh;
$ sudo DOKKU_TAG=v0.26.6 bash bootstrap.sh

# Dokkuのデプロイ先ブランチを変更する (master => main)
$ dokku git:set --global deploy-branch main

# 
# (2) Dokkuホスト上でのアプリケーション設定
#  - アプリ名: hanyan
#  - ドメイン名: hanyan.example.com
# 

# アプリケーションを作成
$ dokku apps:create hanyan

# Redisデータベースの作成とリンク
# 作業中のログに『REDIS_URL』が表示されるのでメモしておきます。後ほどRedisClientから接続する際に使用します。
$ sudo dokku plugin:install https://github.com/dokku/dokku-redis.git redis
$ dokku redis:create hanyan-redis
$ dokku redis:link hanyan-redis hanyan

# アプリケーションとドメインを連携
$ dokku domains:set hanyan hanyan.example.com

# 
# (3) SSL 対応
#  - LetsEncrypt通知メール: foo@example.com
# 

# Dokkuプラグインを追加
$ sudo dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git

# メールアドレスの設定
$ dokku config:set --global DOKKU_LETSENCRYPT_EMAIL=foo@example.com

# LetsEncryptを有効化
$ dokku letsencrypt:enable hanyan

# 証明書を自動更新する設定
$ dokku letsencrypt:cron-job --add

ローカル環境での操作は以下の通りです。私は Windows 10 64bit v21H2 ですが、SSH の設定と git の push 操作ができれば環境に左右されません。

# sshキー関係の設定
#   RLoginなどのソフトでsshのキーを生成
#   生成した秘密鍵をクライアント側の「C:\Users\<ユーザー名>\.ssh\id_rsa」に保存
#   生成した公開鍵(id_rsa.pub)をリモート側の「/home/dokku/.ssh/authorized_keys」に書き込み

# デプロイの準備 (gitのpush先にDokkuホストを追加)
$ git remote add dokku dokku@example.com:hanyan

# デプロイ (Dokkuにpushする)
$ git push dokku main:main

なお、Dokku は『ゼロダウンタイムデプロイ』に対応しているので、Web サービスのプログラム更新時にサービスを停止させる必要がありません。その辺も Heroku と同じですね。

(4) おわりに

書きたいことは沢山あるのですが、タイムリミットのためここまでです。最後までご覧いただきありがとうございました～

はにゃーんボタンもよろしくお願いします！

明日は、@pik さんです！よろしくお願いします～