pcの環境を汚したくないし、ラズパイに簡単に移行できるようにdockerを使ってwebアプリを作ってみたい。


dockerの公式サイト(https://docs.docker.com/get-started/)からdockerでnodejsを使ったtodoアプリの立ち上げ方が書いてある。

このアプリを元にdockerとnodejsの両方の勉強を一気にしようと思ったが、todoアプリの構成がnodejs初心者の自分には理解が難しかった。

そのためdockerで最小限のnodejsの環境を用意して、0からnodejsの勉強をする。


docker

dockerのチュートリアルとかqiitaとか読んでみた。

作る必要があるのは以下のファイル。

・Dockerfile

コンテナという仮想環境を作る土台であるイメージの設定を書くファイル。

・compose.yml

複数のコンテナをまとめて実行できるようにするファイル。1つでも実行が楽になる。

・package.json

nodejsのパッケージをまとめたファイル。

・app.js

nodejsで動かすサーバーのプログラム。


Dockerfileをつくる

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
CMD ["node", "app.js"]
EXPOSE 3000

alpineという軽量なlinuxにnodejsをインストールした環境がdockerによって用意されているのでそのイメージを使う。

イメージの中のappというフォルダを作業ディレクトリに設定。

ホスト側のファイルをappにコピー

npm installでpackage.jsonに記載したライブラリをインストール。

app.jsを実行

ポート3000を開放

compose.yamlをつくる

services:
app:
build:
dockerfile: Dockerfile
working_dir: /app
ports:
- 127.0.0.1:3000:3000
volumes:
- ./:/app

dockerfileの内容でビルド

appディレクトリにcdしておく

ポートは3000

./のディレクトリをコンテナのappディレクトリにマウント。

変更が反映されるようになる。

app.jsをつくる

const http=require('http');
var server=http.createServer(
(request,response)=>{
response.end('Hello Node.js!');
}
);
server.listen(3000);

Hello Wold

package.jsonをつくる

{
"dependencies": {
"express": "^4.21.1",
"sqlite3": "^5.1.7"
}
}

とりあえずexpressろsqliteをインストールするようにしといた。

実行

compose.yamlファイルがあるディレクトリで

docker compose up -d


localhost:3000にアクセスすると

Hello Node.js！と表示される。



あとから追加するパッケージ

vscodeでpackage.jsonに追加しようとすると勝手に最新verを教えてくれる。


・nodemon

これは開発の時しか使わないためdevDependenciesに加える。

dependenciesに加えるとデフォルトだとエラーが出る。

自動で編集したところを更新してくれる。--watch機能があるみたいだが更新してくれる範囲がのーどもんのほうが広いらしい。nodeで起動する代わりにnodemonで起動する。

CMD ["node", "app.js"]をCMD ["nodemon", "app.js"]に変える。


パッケージを追加したらビルドし直す

docker compose up --build -d

コマンド操作

コマンドで操作するとき

nano ファイル名 :ファイル編集。vimコマンド覚えてないから

touch ファイル名 :ファイル作成

ctrl+K :カーソルから行末まで削除

ctrl+U:カーソルから行頭まで削除

ctrl+A: カーソルを行頭へ移動

ctrl+E:カーソルを行末へ移動

rm ファイル名:ファイル、ディレクトリ削除

mkdir ディレクトリ名:ディレクトリ作成

cat: テキスト表示



以下めも

・macでアプリ作成してgithubにアップロード

nodejsでexpressとejsでチャットアプリ作成。

githubにあげたいディレクトリで

git init

git add .

git commit -m 'チャットアプリ作った'

git remote add origin githubのアドレス

git push origin main

readmeとか先に作ってた場合は

git pull origin main --allow-unrelated-histories

してからpushする。

その後コードを更新した場合はadd, commitしてpushする。

git commit -m 'メッセージ' -a

git push origin main

新しいファイルを追加した場合はcommitのaオプションじゃ反映されないため、git add .が必要。

・dockerの環境設定ファイルを作成してgithubにアップロード

dockerフォルダ作ってその中にcompose.yamlとdockerfileを作る。

dockerfileフォルダの外のapp.jsとpackage.jsonを読み込めるように

compose.yamlのbuildのcontextを

app:
build:
context: ../
dockerfile: ./docker/Dockerfile

dockerの親ディレクトリにしておく。

dockerフォルダ内で

docker compose up -d


本番環境はpm2で実行すると良いらしい。

pm2 start ./bin/www

ローカルなら直接指定して ./node_modules/.bin/pm2

package.jsonのscriptsでコマンド指定したほうが楽かも。

・raspiからgithubにログインしてclone

macの方で前に公開鍵認証していたらしい。そのときにパスワード認証をオフにしたのかwindowsからssh接続できなかった。でもraspiでパスワード認証の設定ファイル見たらon担っていたから意味わからん。macの秘密鍵をwindowsに移して見たらエラーがでて、known_hostsから削除したりと色々してwindowsからssh接続できた。

ssh接続できたら

git clone gitのアドレス

でgithubからコピーした。

githubの認証が必要な場合は、パスワードの欄にtokenを入力する。

tokenはgithubの設定ページの開発者設定から発行できる。

・docker環境を起動してアプリ実行

あとはdocker compose up --build

で実行した。

修正がある場合はmacで修正してgitでcommit, pushし、

raspiからgit pullで更新して実行した。

・ngrok(えんぐろっく)で公開

cloudflareもあるがこれはドメイン買わないといけないみたいだからngrokで。

https://qiita.com/ntm718/items/9c374406f5b9457e7878

このサイトを参考。githubにtokenかけないしmac側でngrok公開しないからraspiに直書き？

ngrok.yamlだけ.gitignoreでgitしないようにしてraspiに直接書いた。

てかgithubでprivateリポジトリ無料で使えるようになってたのか。


docker

docker psでコンテナ確認

docker rm コンテナidでコンテナ削除

-fをつければ強制削除

docker compose buildなどでビルドしたあと

docker run コンテナ名 sleep infinity で何もしないで実行させておく

docker exec -it コンテナ番号 /bin/sh コンテナの中に入る。コンテナの中のファイルをlsで確認したいときなど。