はじめに
MarkdownはQiitaやNortionなど様々なサービスで使える超簡単なテキストフォーマットです。
このMarkdownを使って自分で運営できるナレッジ共有サービス(上記のようなサービス)があってもいいのでは？
と思い、オープンソースで作ってみました。
また、MermaidをMarkdownに組み込みたかったこともありそれも理由の一つです。（Mermaid使えるサービスってそんな多くない）最近増えつつあるのはうれしい
機能としては、以下のようになります。
- ログイン機能
- ユーザー管理機能（作成中...）
- 記事(CRUD)
- いいね
検証サイト
https://cloudmarkdown.umaxiaotian.com/
APIリファレンス
https://cloudmarkdown-api.umaxiaotian.com/docs
使用技術
- FastAPI(バックエンド）
- Vue Nuxt.js（フロント）
- Postgresql(データベース)
導入
まず大前提に、DockerとDocker-composeがインストールされている必要があります。
※本番稼働させるときなどは、ミドルウェアをそのままOSに乗っけるのがよさそうだが、本記事ではちょろっと試してみよう的なものなので、Dockerで（ ＾ω＾）・・・
必要なもの
- Dockerが入ったマシン
- HeidiSQL（好きなデータベースクライアントツールでもおｋ）
ホストマシン側の作業
- docker-composeのデータを落としてくる
git clone https://github.com/umaxiaotian/CloudMarkdown_docker.git Cloudmarkdown
そうすると、Cloudmarkdownというフォルダができたはず。。。
作ったフォルダに移動
cd Cloudmarkdown
続いて下記のものを落としてくる
- API
- フロント Nuxt.jsフォルダ
必ずAPIのフォルダ名は、「api」 フロントのフォルダ名は、「app」としてください。※下記の通りやればOK
git submodule add https://github.com/umaxiaotian/CloudMarkdown_API.git api
git submodule add https://github.com/umaxiaotian/CloudMarkdown.git app
下のような感じで、ダウンロードが終わるはず。。
一応今あるフォルダを確認しておく
ls -l
こんな感じになってればOK!
docker-compose.ymlがあるパスで下記のコマンドを実行
※ダウンロードにはちょっと時間がかかる・・・CentOSのイメージで作ったからかな（ ＾ω＾）
docker-compose build
docker-compose up -d
コンテナがスタートしたら下記の画像のようになっているはず。
DBクライアントでユーザー作成
次は、ホスト側から、HeidiSQL（データべースクライアント）でユーザーを作成します。
docker-compose.ymlを一切いじっていなければ下記でログインできます。
USER: Cloudmarkdown
PASSWORD: Cloudmarkdown
PGPASSWORD: Cloudmarkdown
DB: Cloudmarkdown
HOST:127.0.0.1
ログインしたら、
userテーブルを選択し、
下記のように、テストユーザーを作成します。
今回は、ユーザー名「test」、パスワード「test」で作成しました。
以上で、ホスト側の作業は終了です。
では、再びターミナルに戻って、CloudmarkdownのNuxtをビルドします。
yarnコマンドを使って検証環境を立てる
下記コマンドで、Nodeコンテナの中に入ります。
このコンテナには、APIと通信するクライアントツールその名もCloudMarkdownが入っています。
docker exec -it NodeApp bash
入れましたら、いったん中身を確認します。
下記の感じで中身が入っていればOK！
そのディレクトリの位置で.envを作成します。
vi .env
下記を追加して保存します。
EXTRA_FILE_URL=http://localhost:8000
BASE_URL=http://localhost:8000
EXTRA_FILE_URL 画像ファイル保存APIパス
BASE_URL 通常のAPIパス
下記で、必要なnodeモジュールをインストールします。
yarn install
終わりましたら続いて、developモードでnuxtを立ち上げます。
yarn dev
そしたら、下記のように実行されます。
これで、検証環境は立ち上がりましたので
http://localhost:3000
こちらでアクセスできるか試します。
正しく構築できていれば、
このように表示されますので、
ログインボタンから先ほど、入力したテストユーザーのアカウント
USER: test
PASS: test
を入力します。
ログイン出来たらこのようになります。
↓バーが出てくるのがわかりやすいかな。。
以上で終了です。
NginxでクライアントアプリケーションCloudmarkdownを公開する
下記のコマンドを実行すると、appフォルダの中にdistというフォルダが作成されますので、それをnginxやApacheでwwwの中に入れてください。
node.jsを入れたりする必要はありません！そのままhtmlファイルを置く感じでおいてもらえればOK！
yarn generate
最後に
追加の要望機能があったり、質問などありましたら私のTwitterまたは、Qiitaにお書きください。
Twitter: https://twitter.com/umarun_j