Zenn
🎉

MacでWebAPIのプログラムを作成する Vol.1

2023/05/06に公開
.NET
Next.js
nginx
macOS
Web API
tech

index

  • ECサイトのパッケージ開発を携わるようになり、自宅のMacでも良い一層学習できるようにECサイトの環境を構築しようと思いました。
  • ただ、会社のPCはWindowsですが、自宅にはM1のMacBook Airしかないため、このM1 MacBook AirでWebAPIプログラム（ECサイト）を立ち上げようと思います。

進め方

  • 以下の手順で進めていこうと思います。
    1. MacにWEBサーバ（NGINX）を構築する （今回はこちら）
    2. .NETのインストールおよびAPIサンプルを作成する
    3. Next.js commerceのインストール、フロントを立ち上げる
    4. 簡単な動作検証を実施する

MacにWEBサーバ（NGINX）の構築する

  • 仕事では.NETプログラムであるため、基本的にIISをWebサーバとしていますが、個人的にはLinuxOS上でWebサーバを取り扱いたいと思うので、NGINXを選択します。
    • 余談ですが、Nginx/nginxという綴りだと思ってたんですが、公式サイトではNGINXと全部大文字なんですね。。。（知らなかった）

homebrewでNGINXをインストールします。

  • homebrewのインストールは今後記載しますが、Macだと基本的にhomebrewのお世話になりますね。
~ % brew install nginx
  • 色々とメッセージが流れたあと終了するので、ちゃんとNGINXがインストールされているか確認しましょう。
    • optionで「-v」するとインストールされているバージョンが表示されます。
    • インストールがうまくできていない場合、コマンドがない旨が表示されます。
~ % nginx -v
nginx version: nginx/1.23.4
  • 無事に入ってますね。
    • 今時点（2023/4/30)のmainline versionである「1.23.4」が入りました。

NGINXを起動します。

  • 早速起動しましょう。homebrewでインストールしたので、brewコマンドのサービスから起動します。
    • この辺りは、NGINXをインストールした時のメッセージに書かれています。（英語だけど）
~ % brew services start nginx
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)

  • 無事に起動しました。

  • では、本当に起動しているか確認していきましょう。

    • この状態ではインストール時のデフォルトで起動しているので、ポート番号はインストール時にメッセージとして出力されています。（こんな感じに）
    Docroot is: /opt/homebrew/var/www

The default port has been set in /opt/homebrew/etc/nginx/nginx.conf to 8080   so that
nginx can run without sudo.

nginx will load all files in /opt/homebrew/etc/nginx/servers/.
    • でも、ちゃんとどのポートで起動したか見てみようと思います。
    • lsofコマンドを使いましょう。
    ~ % lsof                             
COMMAND     PID USER   FD      TYPE             DEVICE  SIZE/OFF                NODE NAME
loginwind   383 sasa  cwd       DIR               1,15       640                   2 /
loginwind   383 sasa  txt       REG               1,15   2754896 1152921500312089852 /System/Library/CoreServices/loginwindow.app/Contents/MacOS/loginwindow
  ：
100行以上出てるかも。。。
    • うーん。めっちゃ表示されちゃってよくわからない。そしてポートも表示されてない。
    • Commandをnginxに絞って、さらにポートの表示をしてみます。
    ~ % lsof -c nginx -P              
COMMAND   PID USER   FD     TYPE             DEVICE SIZE/OFF     NODE NAME
nginx   36429 sasa  cwd      DIR               1,15     1056  1582237 /opt/homebrew
nginx   36429 sasa  txt      REG               1,15  1236352 18850802 /opt/homebrew/Cellar/nginx/1.23.4/bin/nginx
nginx   36429 sasa  txt      REG               1,15   544464 16644016 /opt/homebrew/Cellar/pcre2/10.42/lib/libpcre2-8.0.dylib
nginx   36429 sasa  txt      REG               1,15   505936 16512339 /opt/homebrew/Cellar/openssl@1.1/1.1.1t/lib/libssl.1.1.dylib
  ：
25行くらい出てる。。。
    • まだ、めっちゃ出ますね。
    • LISTENしているやつだけをGrepで絞ってみます。
    ~ % lsof -c nginx -P | grep LISTEN
nginx   36429 sasa    6u    IPv4 0x1f942083c70547f5      0t0      TCP *:8080 (LISTEN)
nginx   36432 sasa    6u    IPv4 0x1f942083c70547f5      0t0      TCP *:8080 (LISTEN)
    • おー。欲しい情報だけになりました。8080ポートで起動してることも確認できます。
    • さて、起動しているのでブラウザからアクセスしてみます。
      1. ブラウザを開きます。
      2. 「localhost:8080」を打ち込みます。
      3. 「NGINX」のスタート画面が表示されました。
    • これでNGINXの起動までが完了です。

次回

  • .NETをインストールしてWebAPIを作成していきます。

Discussion