📝

VueのアプリをDocker化する

2023/01/03に公開約1,800字

はじめに

あけましておめでとうございます!
今年は「発信」をテーマとして頑張りたいです。キョです。

みなさん正月休みはいかがお過ごしでしたか。
私の普段の仕事は主にバックエンド側の開発を行っていますが、
フロントエンドの開発に対しても気になって(今後自分のブログサイトを作るためにも!)、
この休み、vueというフレームワークを使ってみました。
そして、作ったvueアプリのDocker化も行ってみましたので、その備忘録として残りたいと思います。
※使わないとすぐ忘れますよね。。!

アプリで使って技術

今回は作ったアプリはAria2というダウンロードユーティリティの「JSON-RPC」インターフェースを操作するアプリです。
使った技術は以下になります。

  1. vite
  2. vue3
  3. Typescirpt
  4. vue-router
  5. 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

ログインするとコメントできます