📝
VueのアプリをDocker化する
はじめに
あけましておめでとうございます！
今年は「アウトプット」をテーマとして頑張りたいです。キョです。
みなさん正月休みはいかがお過ごしでしたか。
私の普段の仕事は主にバックエンド側の開発を行っていますが、
フロントエンドの開発に対しても気になって（今後自分のブログサイトを作るためにも！）、
この休み、vueというフレームワークを使ってみました。
そして、作ったvueアプリのDocker化も行ってみましたので、その備忘録として残りたいと思います。
※使わないとすぐ忘れますよね。。！
アプリで使って技術
今回は作ったアプリはAria2というダウンロードユーティリティの「JSON-RPC」インターフェースを操作するアプリです。
使った技術は以下になります。
- vite
- vue3
- Typescirpt
- vue-router
- axios
でも、今回の記事は作ったvueアプリのDocker化の備忘録なので、詳細は割愛します。
VueアプリのDocker化
アプリをDocker化するためのDockerFileは以下になります。
実はDockerに慣れている方なら、すごく簡単だと思いますが、
私に対しては意外と難しかったでした。。。まだまだ勉強しないとダメだなと痛感しました。
各行の意味についてはコメント記載しました。
# Docker Hubで公開されているイメージからベースになるイメージを指定
FROM node:lts-alpine
# カレントワーキングディレクトリとして 'app' フォルダを指定する（コンテナ中のフォルダ）
WORKDIR /app
# ローカルファイルをコンテナの中にコピー
# 今回は作ったアプリのフォルダの中身をコンテナにコピー
COPY ./aria2client ./
# プロジェクトの依存ライブラリをインストールする
RUN yarn install
# コンテナが接続用にリッスンするポートを指定（ポート公開）
EXPOSE 5173
# コマンド「yarn dev --host」を実行
# もし、ここで「--host」を指定しないとホスト環境からアクセスできなくなるので、指定し忘れないように
CMD ["yarn", "dev", "--host"]
もちろん、本番環境で使うDockerFileはこんな感じで書くのは危ないですね。
本番環境公開時はnginx等のイメージを活用してみてください。
では、Dockerイメージをビルドしましょう。
# 「-t」はイメージにタグをつける（今回の場合はaria2client）
# 最後の「.」はイメージビルドするため利用するコンテントのパスを指定（今回の場合はカレントフォルダ中のもの）
$ docker build -t aria2client .
ビルド終わったら、さっそくコンテナを作成実行しましょう。
# 「-it」は「-i」と「-t」二つオプションを一緒に指定すること
# 「-i」は「対話式」を指定する意味で、ざっくりというと入力ができること。例えば：キー入力が可能になって、「Ctrl+C」でキャンセルできるなど
# 「-t」は正直理解できていないが、仮想端末を配置するコマンドらしい。。。
# 「-p」はホストとコンテナ内部のポートを接続するオプション。今回の場合はホスト側の「5173」とコンテナ中の「5173」を接続
# 「--rm」はコンテナ終了時、自動的にコンテナを削除するオプション
# 「--name」はコンテナ名を設定
# 最後の「aria2client」はイメージ名の指定
$ docker run -it -p 5173:5173 --rm --name aria2client_test aria2client
うまく起動できましたね。
終わり
これで、VueアプリのDocker化ができました。
それでは、今年も良い一年になりますように！
Discussion