AppleSilicon の Mac mini (macOS Sonoma) に Node.js + Next + Typescript の開発環境を構築する手順です。
次の順でインストールしていきます
コマンドラインデベロッパツール (Command Line Tools for Xcode)
- バージョン確認
m@mopnoMac-mini ~ % git --version
xcode-select: note: No developer tools were found, requesting install.
If developer tools are located at a non-default location on disk, use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, and cancel the installation dialog.
See `man xcode-select` for more details.
m@mopnoMac-mini ~ % python3 -V
xcode-select: note: No developer tools were found, requesting install.
If developer tools are located at a non-default location on disk, use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, and cancel the installation dialog.
See `man xcode-select` for more details.
m@mopnoMac-mini ~ % clang --version
xcode-select: note: No developer tools were found, requesting install.
If developer tools are located at a non-default location on disk, use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, and cancel the installation dialog.
See `man xcode-select` for more details.
m@mopnoMac-mini ~ % make --version
xcode-select: note: No developer tools were found, requesting install.
If developer tools are located at a non-default location on disk, use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, and cancel the installation dialog.
See `man xcode-select` for more details.
m@mopnoMac-mini ~ %
- インストール
m@mopnoMac-mini ~ % xcode-select --install
xcode-select: note: install requested for command line developer tools
m@mopnoMac-mini ~ %
[インストール]
- バージョン確認
m@mopnoMac-mini ~ % git --version
git version 2.39.3 (Apple Git-145)
m@mopnoMac-mini ~ % python3 -V
Python 3.9.6
m@mopnoMac-mini ~ % clang --version
Apple clang version 15.0.0 (clang-1500.1.0.2.5)
Target: arm64-apple-darwin23.3.0
Thread model: posix
InstalledDir: /Library/Developer/CommandLineTools/usr/bin
m@mopnoMac-mini ~ % make --version
GNU Make 3.81
Copyright (C) 2006 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE.
This program built for i386-apple-darwin11.3.0
m@mopnoMac-mini ~ %
Homebrew
m@mopnoMac-mini ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
==> Checking for `sudo` access (which may request your password)...
Password:
(snip)
m@mopnoMac-mini ~ % brew -v
zsh: command not found: brew
m@mopnoMac-mini ~ %
m@mopnoMac-mini ~ % (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/m/.zprofile
m@mopnoMac-mini ~ % eval "$(/opt/homebrew/bin/brew shellenv)"
m@mopnoMac-mini ~ % brew -v
Homebrew 4.2.10
m@mopnoMac-mini ~ %
Iterm2
いつか kitty に乗り換えたい
% brew install iterm2
これ以降の CLI 操作は Iterm2 で行います。
プロンプトを % にする
% pwd
/Users/m
% ls -a
. .Trash .zsh_sessions Downloads Pictures
.. .config Desktop Library Public
.CFUserTextEncoding .zprofile Dev Movies
.DS_Store .zsh_history Documents Music
% vi .zshrc
% cat .zshrc
export PS1='%# '
%
起動時のフォルダを指定する
- 起動時のフォルダを作成
% pwd
/Users/m
% ls
Desktop Documents Downloads Library Movies Music Pictures Public
% mkdir Dev
%
- Iterm2 の Settings の変更
- Iterms > Settings... > Profiles > General
- Working Directory > Directory のラジオをオンにしてパスを指定する
ログを出力する
% pwd
/Users/m/Dev
% mkdir termlog
%
- Iterm2 の Settings の変更
- Iterms > Settings... > Profiles > Session
- Miscellaneous > Automatically ... をオンにしてパスを指定する
Google Chrome
% brew install google-chrome
Docker Desktop for Mac
% brew install --cask docker
% docker version
Client:
Cloud integration: v1.0.35+desktop.11
Version: 25.0.3
API version: 1.44
Go version: go1.21.6
Git commit: 4debf41
Built: Tue Feb 6 21:13:26 2024
OS/Arch: darwin/arm64
Context: desktop-linux
Server: Docker Desktop 4.28.0 (139021)
Engine:
Version: 25.0.3
API version: 1.44 (minimum version 1.24)
Go version: go1.21.6
Git commit: f417435
Built: Tue Feb 6 21:14:22 2024
OS/Arch: linux/arm64
Experimental: false
containerd:
Version: 1.6.28
GitCommit: ae07eda36dd25f8a1b98dfbf587313b99c0190bb
runc:
Version: 1.1.12
GitCommit: v1.1.12-0-g51d5e94
docker-init:
Version: 0.19.0
GitCommit: de40ad0
%
% docker compose version
Docker Compose version v2.24.6-desktop.1
%
Visual Studio Code
brew install visual-studio-code
ここで開発対象の gitリポジトリを clone しておきます
% pwd
/Users/m/Dev
% git clone https://github.com/unrcom/sirokuro-dev7.git
Cloning into 'sirokuro-dev7'...
Username for 'https://github.com': ishi32
Password for 'https://ishi32@github.com':
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
% ls
sirokuro-dev7 termlog
% cd sirokuro-dev7
% ls
README.md
% cat README.md
# sirokuro-dev7
%
node の開発環境を構築
Docker container 起動
docker network create
% docker network ls
NETWORK ID NAME DRIVER SCOPE
4af6ae732f3f bridge bridge local
777b5a0c38b0 host host local
4671f838fd33 none null local
% docker network create sknet
4fa724a5e3f302880e1c25d2fd5ac9545daa18e84eab62f9d19a5f97d2bb3290
% docker network ls
NETWORK ID NAME DRIVER SCOPE
4af6ae732f3f bridge bridge local
777b5a0c38b0 host host local
4671f838fd33 none null local
4fa724a5e3f3 sknet bridge local
%
docker-compose.yml
% pwd
/Users/m/Dev/sirokuro-dev7/front
% ls
docker-compose.yml
% cat docker-compose.yml
version: '3'
services:
sk:
image: node:latest
container_name: 'sk'
hostname: 'sk'
ports:
- '3000:3000'
stdin_open: true
tty: true
working_dir: '/var/www/html'
volumes:
- ./src:/var/www/html
networks:
- sknet
networks:
sknet:
external: true
%
長らく docker-compose up で起動していましたが、docker compose の現バージョンでは docker composd up です。
% docker compose up
[+] Running 9/9
✔ sk 8 layers [⣿⣿⣿⣿⣿⣿⣿⣿] 0B/0B Pulled 26.1s
✔ c2964e85ea54 Pull complete 5.3s
✔ d3436c315a5d Pull complete 4.2s
✔ 603ae72c83b1 Pull complete 8.3s
✔ bcabfc6c415b Pull complete 17.4s
✔ d4787ee6f8d4 Pull complete 5.8s
✔ 7ce090b99609 Pull complete 12.3s
✔ f6787848695e Pull complete 10.2s
✔ c00e94904238 Pull complete
22.9s
[+] Running 1/1
✔ Container sk Created 0.2s
Attaching to sk
sk | Welcome to Node.js v21.6.2.
sk | Type ".help" for more information.
これで node:latest イメージの docker container が起動しました。
container 状態確認
% docker container ls
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6641398e3a05 node:latest "docker-entrypoint.s…" About a minute ago Up About a minute 0.0.0.0:3000->3000/tcp sk
%
container に接続して bash を起動
% docker container exec -it sk /bin/bash
root@sk:/var/www/html#
Next.js + Typescript
Next.js 日本語翻訳プロジェクトの手順で進めてみます。
npx create-next-app@latest --typescript
(snip)
Ok to proceed? (y) y
✔ What is your project named? … sk
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
(snip)
Success! Created sk at /var/www/html/sk
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice
root@sk:/var/www/html#
開発サーバ起動
root@sk:/var/www/html/sk# pwd
/var/www/html/sk
root@sk:/var/www/html/sk# ls
README.md next.config.mjs package-lock.json pages public tailwind.config.ts
next-env.d.ts node_modules package.json postcss.config.js styles tsconfig.json
root@sk:/var/www/html/sk# yarn dev
yarn run v1.22.19
$ next dev
▲ Next.js 14.1.1
- Local: http://localhost:3000
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
✓ Ready in 1484ms
ここで一度 Vercel でホスティングしてみる
git を操作しますので、まずは user.name と user.email を設定します。
% git config --global user.name "ishi32"
% git config --global user.email "ishi32@unremoted.com"
% git config user.name
ishi32
% git config user.email
ishi32@unremoted.com
%
git push します
% git status
On branch main
Your branch is up to date with 'origin/main'.
Untracked files:
(use "git add <file>..." to include in what will be committed)
front/
nothing added to commit but untracked files present (use "git add" to track)
% git add front/
% git status
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: front/docker-compose.yml
new file: front/src/sk/.eslintrc.json
new file: front/src/sk/.gitignore
new file: front/src/sk/README.md
new file: front/src/sk/next.config.mjs
new file: front/src/sk/package-lock.json
new file: front/src/sk/package.json
new file: front/src/sk/pages/_app.tsx
new file: front/src/sk/pages/_document.tsx
new file: front/src/sk/pages/api/hello.ts
new file: front/src/sk/pages/index.tsx
new file: front/src/sk/postcss.config.js
new file: front/src/sk/public/favicon.ico
new file: front/src/sk/public/next.svg
new file: front/src/sk/public/vercel.svg
new file: front/src/sk/styles/globals.css
new file: front/src/sk/tailwind.config.ts
new file: front/src/sk/tsconfig.json
% git commit -m "1st commit"
[main bc197fb] 1st commit
18 files changed, 5213 insertions(+)
create mode 100644 front/docker-compose.yml
create mode 100644 front/src/sk/.eslintrc.json
create mode 100644 front/src/sk/.gitignore
create mode 100644 front/src/sk/README.md
create mode 100644 front/src/sk/next.config.mjs
create mode 100644 front/src/sk/package-lock.json
create mode 100644 front/src/sk/package.json
create mode 100644 front/src/sk/pages/_app.tsx
create mode 100644 front/src/sk/pages/_document.tsx
create mode 100644 front/src/sk/pages/api/hello.ts
create mode 100644 front/src/sk/pages/index.tsx
create mode 100644 front/src/sk/postcss.config.js
create mode 100644 front/src/sk/public/favicon.ico
create mode 100644 front/src/sk/public/next.svg
create mode 100644 front/src/sk/public/vercel.svg
create mode 100644 front/src/sk/styles/globals.css
create mode 100644 front/src/sk/tailwind.config.ts
create mode 100644 front/src/sk/tsconfig.json
% git status
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
(use "git push" to publish your local commits)
nothing to commit, working tree clean
% git push https://github.com/unrcom/sirokuro-dev7.git
Enumerating objects: 28, done.
Counting objects: 100% (28/28), done.
Delta compression using up to 8 threads
Compressing objects: 100% (23/23), done.
Writing objects: 100% (27/27), 57.15 KiB | 9.52 MiB/s, done.
Total 27 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/unrcom/sirokuro-dev7.git
d7bb411..bc197fb main -> main
%
Vercel へデプロイする
Vercel へログイン
- [Add new Project]
- インポートする Git リポジトリの [import] をクリック
- Framework Preset に Next.js を選択
- Root Directory の [Edit] をクリック
- Root Directory を選択して [Continue]
- Root Directory には package.json が存在するフォルダを指定します
- [Deploy]
- ブラウザから確認
ここまでできてしまえば、あとはもう自由自在です。
- VSCode でコードを変更
- 開発サーバで動作確認
- git push すると Vercel で自動ビルド＋デプロイがはしる
- 変更したアプリが公開される
しかるべきタイミングで URL は独自のものに変更します。開発環境の構築、おつかれさまでした。