0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Let's ハンズオン🤙】node.jsをDocker化してDocker run❗️

Posted at

【Let's ハンズオン🤙】node.jsをDocker化してDocker run❗️

目次

  1. Dockerをインストール
  2. アプリを準備
  3. アプリをDocker化
  4. Docker run!!

Dockerをインストール

なにがともあれDockerを使用するので、自身の環境にDockerをインスト-ルしちゃいましょう!

Macの方はこちら

Windowsの方はこちら

ダウンロードのボタンをクリックでダウンロードが開始されます。

アプリを準備

Expressのアプリを作成しちゃいましょう!

まずは、Node.jsがインストールされているか確認です。

以下、二つのコマンドを実行して確認してみてください。

node -v
npm -v

ゆうじろうはこんな感じの表示がでました。

  • node -v 結果
v16.14.0
  • npm -v 結果
v8.3.1

では、アプリを作成していきましょう!

ExpressというNode.jsのフレームワークを使用するので、まずはインストールです。

npm install -g express-generator

これでExpressのアプリが簡単に作成できる様になりました。

では、作成していきましょう。

任意の場所にプロジェクト用のディレクトリを作成して、以下のコマンドを実行です。

express --view=ejs .

こんな感じの表示がでてきたら、yをクリックで続行です。

destination is not empty, continue? [y/N] 

こんな感じの出力がされましたか?

destination is not empty, continue? [y/N] y

   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.ejs
   create : views/index.ejs
   create : app.js
   create : package.json
   create : bin/
   create : bin/www

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=express-react:* npm start

では、dependenciesをinstallしてほしいとのことなので、インストールしてあげましょう。

npm install

npm installができたら、アプリをローカル環境で実行しましょう!

npm start
> [ディレクトリ名]@0.0.0 start
> node ./bin/www

こんな感じの表示がでれば、以下へアクセスです!

ExpressのDefaultの画面が表示されればアプリ作成成功です!

アプリをDocker化

次は作成したアプリをDocker Image化していきます。

プロジェクトのルート階層へ以下のファイル2つを作成してください。

  • Dockerfile
  • .dockerignore

Dockerfileの中身はこんな感じ

  • Dockerfile
# 最初に調べたnodeのバージョンを記載
FROM node:16

# アプリケーションディレクトリを作成する
WORKDIR /usr/src/app

# アプリケーションの依存関係をインストールする
# ワイルドカードを使用して、package.json と package-lock.json の両方が確実にコピーされるようにします。
# 可能であれば (npm@5+)
COPY package*.json ./

RUN npm install

# アプリケーションのソースをバンドルする
COPY . .

# 開放するport番号を記載
EXPOSE 3000
CMD [ "npm", "start" ]

次は.dockerignoreファイルです。
これにより、ローカルモジュールとデバッグログが Docker イメージにコピーされたり、 イメージ内にインストールされているモジュールが上書きされたりするのを防ぐことができます。

  • .dockerignore
node_modules
npm-debug.log

ここまで作成したら、Dockerのイメージを作成します。

docker build . -t express-app:v1

express-appのv1が作成されます。

DockerDesktopを見てみましょう。
imagesの箇所へDockerイメージが作成されていれば完了です!

以下のコマンドでも確認できます。

docker images

Docker run!!

ここまでくればもう簡単です。
以下のコマンドを実行し、Docker上でExpressで作成されたアプリを実行してください!

docker run -p 3000:3000 -d express-app:v1

-dオプションで実行しているので、バックグラウンドで実行中となります。

では、再度以下へアクセスしましょう!

見た目は変わりませんが、今度はDockerコンテナ上でのアプリの実行となります。

動作確認が終了したら、アプリを停止しておきましょう。

stopボタンでアプリを停止できます。

ハンズオンは以上となります!

お疲れ様でした。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?