わたかぜコウのはてなブログ

わたかぜコウのブログです!

Node周りとDockerの勉強してる

前回に続きブログシステムの写経を最後まで進めてました!

参考にしたブログシステムの動画

ローカルの環境だとうまくいったもののタブレットPCにクローンして実行してみたところ、環境が変化した影響でうまくいかなくなっちゃいました… もともとLinux環境へ移すつもりで書いていたけど、(バージョンは異なる)同じWindowsでもうまくいかなかったのは想定外なのでした…

環境によって異なるのはけっこう手間だなあって思ったので、仮想環境であるDockerをついに導入してみました。 Dockerは仮想環境でありながらOSを作らずに実行できる軽量仮想環境で、作るのは色々用意することはあれど消すのは簡単だから色々使い捨ても本番でも活躍が見込める優れものなのです!

百聞は一見に如かずなのでまずは公式が用意してるHelloWorldドッカーで挙動を確認しつつ、これまで使ってたローカルのエクスプレスで実行してるサーバーをDocker化してみました。 色々苦労したけど成功できて良い感じに導入できました!

やってたこと

Dockerfileはnodeのバージョンを指定してパッケージファイルをコピーし、yarnコマンドでインストール、ポート番号を指定してyarnの実行を最後に記述していました。

FROM node:20.9-alpine

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

# アプリケーションの依存関係をインストール(lockも含む)
COPY package*.json ./

RUN yarn install

# アプリケーションのソースをバンドルする(一部はコピーしない)
COPY . .

# 開放するポート番号
EXPOSE 80
CMD [ "yarn", "start" ]

.dockerignoreは主に頻繁に更新するデータのみ指定

node_modules
static
data
views

docker-compose.yml

services:
  local:
    build: .
    ports:
      - 8080:80
    restart: always
    volumes:
      - ./static:/app/static
      - ./data:/app/data
      - ./views:/app/views

下部分の行は主にマウントというのをしてます。 これで中身を書き換えたり画像を入れたりするとすぐに反映されるのと、sqliteを使用していてマウントしてあるdataディレクトリの方に保存してるので、データベースもコンテナ再起動しても残るようになっています。 restart:alwaysを指定したことでパソコン起動時に自動で起動するdockerアプリと一緒にさっきのローカルサーバーが起動される、といった仕掛けができます。

これらのファイルを一番ディレクトリに置いたうえで以下を実行

docker compose up -d

docker composeが便利だったのでしれっと内容を変えました🐏 一発で作れるのはもちろんのこと、docker compose down で作ったやつ一発で止めれるからとても便利…

これまではtrayrunでコマンドを隠しながら実行するやつを使っていたので、それがdockerで管理できるようになったのは楽だなあって思いました! マウントに依存してるのでdockerの長所を少しつぶしちゃってるけど、あくまでもローカル用だし…!

ついでにyarnも今回初めて導入してました。 yarnコマンドだけでnpmからすぐに移行できて便利~ってなってました

まだこのサイト自体はそのままなのですが、確実に次に移行する準備はできつつあります…まだ先は長いけど…🏔🐏 今度はさっき勉強したDockerを活用してデスクトップPCとタブレットPC両方で動くNextJSアプリを試します!(たぶん追記に続く)

追記 11/18の夜中辺り

ラズパイのNodeをLTSに更新して(nコマンドがとても便利だった)、NextJSアプリを実行しようとしたらOSの問題なのか存在しないファイルをDLしようとして実行できなかった… ラズパイで動かそうとする限りこういう調子かもしれない (ビルドできるかどうかはOS次第なので) Windows側のWSLでは普通にビルドできたし、そっちからもDockerイメージ生成できるのは知れたけど、ラズパイはカーネルが根本から違うから…! バックエンドにNextはOSの問題もあって、Expressの方は動くからそっち使うにしても、フロントエンドは別のやーつ使う方向が良さそうかも…? NextJS使うならラズパイ以外ならほぼ稼働できると思う(むしろそうすべき)けど、経済力的にラズパイ縛りはせざるを得ないので、とりあえず現状維持しつつ模索する🐏

ついでにNuxtも入れてみようとしたけど、ラズパイだとテンプレ生成ができなかったりDockerもカーネル違いでビルドできなかったりでこっちも想定したい環境だとダメそう…!

Dockerの異なる環境へのビルド方法を知ってラズパイのカーネルを対象にPCでビルドしてみてもエラーってなっちゃう… arm/v7でビルドできないけどarm64ならビルドできるという状態…! ビルドは強いPCでするやり方は知ったけど、やっぱ環境の根本的な問題っぽい…

Nuxtはビルドできた!30分くらいかけてHello world的なやつできた!( 現実的ではなさそうね…! 副産物にdockerのpull時間がかなりかかることがわかって、そのためにNodeJSのalpineで軽量化することを学んだ、軽くするの大事だ…☁

追記 11/19 13時 Fastifyといった他の使うのも考えてたけどサーバー自体をどうにかしたいなあって思ってて色々調べてた! Google Cloudでサーバー立てるサービス(Compute Engine)があるらしく、それもラズパイ超えるスペックで使っても無料枠を超えない見込みなのでそれ使ってみるか~ってなってる🖥

追記 11/20 12時頃 Compute Engineはサーバー自体は無料で立てれるけど、ウェブサーバーにすると通信に費用が掛かるみたい(無料枠もあるっぽいけど画像いっぱいなぼくのページだと絶対上限超える)なので、やめとこ…ってなってた でも実際に立ててみて色々な知見を得られたのでよし! サーバーへの通信をうっかり壊しちゃって色々調べてよかった…(

(( 6 - ヮ-)∂ すやすや