ふぁーです。先日 "東京Web3ハッカソン" というイベントに参加してきました！
2週間でブロックチェーンアプリを開発して公開して提出、かつ説明動画や資料の用意も必要だったのでかなり痺れる２週間でした
（実際には平日仕事で開発出来ないのと土日は子育てもあり、実質土日に数時間ずつしか時間が取れませんでした）
そんな短期間での開発をなんとかやりとげたのですが、もっと効率的に開発したいという思いが強くなった為、ハッカソンの際に開発した開発環境をチューニングして公開する事にしました。
もし私以外にも同じような構成のアプリケーションをぱぱっと作ってみたいという方がいましたら是非利用頂ければ幸いです。
構成
- フロントエンド
- Vite
- React, React-router-dom
- Mui-material, emotion
- Recoil
- i18n
- バックエンド
- Express
- mysql
- その他
- Open API
- Docker
- eslint
- prettier
レポジトリ
以下に公開致しました。是非もっと良い構成やアイディアがあれば遠慮なく issue or pull request して頂けると嬉しいです
使い方
各操作方法を説明します
初期設定
※ コマンドをまとめる為に makefile を用いています。 導入していない方は先にそちらをインストール下さい
以下の通り実行して、依存ライブラリをインストールしてください
make install
開発用サーバー起動
以下の通りに実行するだけです
make start
終了する場合は ctrl + c でとまります。起動していたコンテナが止まるだけなので一旦コンテナを削除してしまいたい場合は以下の通りに実行して下さい
make down
デプロイ
ビルドしてサーバーにデプロイする際には以下を実行して下さい
make deploy
その他
その他、よく使いそうなコマンドをまとめておきます
一旦環境をきれいにしたい
インストールした node_modules や dist、docker を綺麗にしたい場合は以下を実行して下さい
make clean
一旦コンテナ化してしまいたい
make deploy のケースは VM 等での利用に向いていますが、 Google Cloud run 等で使いたい際には以下の手順を踏んでください
- 開発したソースを一式ご自身の GitHub レポジトリにpushして下さい
- push 後、 レポジトリ内の GitHub Actions タブを確認頂ければビルドが自動で開始されていることが確認されます
- 終わるのを待ちます
- 完了マークになりましたらコンテナ完成です
まとめ
上記のような操作で開発を進めていけます。もし宜しければ活用下さい！
なお当方はハッカソンにて以下の作品を提出しました。Blockchain には Symbol というパブリックブロックチェーンを活用しています。
Symbol は 難しいコントラクトの開発方法を覚えなくとも Javascript の sdk や API を経由して簡単にブロックチェーンアプリを開発する事が出来ます。
もしブロックチェーンアプリ開発に興味のある方は以下を参照下さい
サイト
https://symbol-community.com/ja-JP
入門サイト
https://github.com/xembook/quick_learning_symbol
お問い合わせ
https://discord.gg/A8MRq5Vuvt
他、ハッカソンのインフラ構築には今回 Alibaba Cloud を使いました
中国...？と思う方もいるかもしれませんが、今回以下の理由にて選定しています。
こちらももし宜しければ触ってみてもいいかもしれません！
- ちゃんと東京リージョンもある
- 他クラウド事業者よりも大抵一回り安い
- 管理コンソールがとてもシンプル。余計なものがなく知識がなくとも使いやすい
- お勧めは Simple Application Server。定額で安価なサーバーを設置出来ます
もしハッカソンの際にどういった構成でインフラを用意したか気になった方はレポジトリの方に記載しておりますのでご確認下さい
2022/11/26 更新