MacOS の PC 上に開発環境を構築する

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 ~ % 
```

![スクリーンショット 2024-03-02 18.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/a018ebd2-f7b4-c979-f9eb-69396970c520.png)

[インストール]

![スクリーンショット 2024-03-02 18.36.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/22abbbfa-754d-fddd-431d-e6a4e6535b1f.png)

- バージョン確認

```
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 のラジオをオンにしてパスを指定する

![スクリーンショット 2024-03-02 20.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/ccc2eb3d-1371-d5d6-d1ea-9f4f5221ed44.png)

### ログを出力する

```
% 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
```

![スクリーンショット 2024-03-02 20.58.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/14ba4dc2-e674-1db7-a4fa-0ece2a835fc6.png)

```
% 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 しておきます

![スクリーンショット 2024-03-02 9.51.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/e3c1d4be-8ad6-ca82-78c4-e6e42f8ef78d.png)

![スクリーンショット 2024-03-02 10.01.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/4da96066-a345-dfe3-26e8-c5420ad5a1d7.png)

```
% 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 日本語翻訳プロジェクト](https://nextjs-ja-translation-docs.vercel.app)の手順で進めてみます。

```
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

```

![スクリーンショット 2024-03-03 21.36.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/fb8f3e63-47c4-d1eb-03cf-2526364c0029.png)

## ここで一度 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] をクリック

![スクリーンショット 2024-03-03 22.25.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/f646a173-c947-9e2e-0a69-54b668c87499.png)

- Root Directory を選択して [Continue]
  - Root Directory には package.json が存在するフォルダを指定します
- [Deploy]

![スクリーンショット 2024-03-03 22.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/d02083f1-3030-1e99-43a1-fb21b63eabe4.png)

- ブラウザから確認

![スクリーンショット 2024-03-03 22.30.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164727/faf7cabc-520d-db26-5e53-a04452323bd6.png)

ここまでできてしまえば、あとはもう自由自在です。

- VSCode でコードを変更
- 開発サーバで動作確認
- git push すると Vercel で自動ビルド＋デプロイがはしる
- 変更したアプリが公開される

しかるべきタイミングで URL は独自のものに変更します。開発環境の構築、おつかれさまでした。