『クソアプリ 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 さんです！よろしくお願いします～