はじめに

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 clone https://github.com/umaxiaotian/CloudMarkdown_API.git api
git clone 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

umaxiaotian/CloudMarkdown