Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順

nginx をインストール

Apple Mac ではインストールに brew を使用します。brew がインストールされていない場合は、他の場所を検索してください。
コマンドを実行

最初のステップは、もちろん、Android Market や Apple AppStore に似たソフトウェア倉庫と考えることができる brew ライブラリを更新することです。

醸造アップデート

2番目のステップは、brewライブラリにnginxがあるかどうかを直接確認することです。

ブリューサーチ nginx

通常、次のような状況が発生します

表示されたら、ライブラリがすでに存在していることが証明され、インストールコマンドを直接実行できます。

nginx をインストール

インストール後にエラーが発生しない限り、nginx は正常にインストールされています。。。

Mac環境でのNginxの対応パス

まず、nginxの共通パスを知っておく必要があります。以下にリストしました。

例示する	パス
nginx 設定パス (conf およびその他のファイル)	/usr/local/etc/nginx
nginxにデプロイされたプロジェクトのパッケージアドレス	/usr/local/etc/nginx/servers
nginxのログ	ローカル
nginxのデフォルトのホームページアドレスにアクセスする	/usr/local/var/www

nginxに対応するnginx.confファイルを編集します。これは、上記の設定パスに対応しています。

#ユーザーnobody;
ワーカープロセス 1;

#error_log ログ/error.log;
#error_log ログ/error.log 通知;
#error_log ログ/error.log 情報;

#pid ログ/nginx.pid;


イベント {
    ワーカー接続 1024;
}


http {
    mime.types を含めます。
    デフォルトタイプ アプリケーション/オクテットストリーム;



    ファイル送信オン;
    #tcp_nopush オン;

    #キープアライブタイムアウト 0;
    キープアライブタイムアウト65;
	クライアントボディバッファサイズ 10m;
	クライアントの最大ボディサイズは20mです。
    #gzip オン;

    サーバー{
        聞く 80;
        server_name ローカルホスト;
        位置 / {
            ルート /usr/local/etc/nginx/servers/html;
            インデックス index.html;
            try_files $uri $uri/ /index.html;
        }
        場所 /api {
           proxy_pass http://localhost:18080/api;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           $Real $http_x_forwarded_for を設定します。
           ( $Real ~ (\d+)\.(\d+)\.(\d+)\.(\d+),(.*) ){の場合
                $Real $1.$2.$3.$4 を設定します。
          }
          proxy_set_header X-Real-Ip $Real;
        }
}

特別な注意が必要な点が 1 つあります。ルートが絶対パスでない場合、アクセスできない可能性があります。

ここに画像の説明を挿入

インターネット上のパスのほとんどは相対パスです。何が問題なのかわかりません。ローカルでは機能しません。絶対パスを使用する必要があります。上記のパスの server/html は、npm run build コマンド後の vue プロジェクトの dist パッケージです。これを解凍してこのパスに配置するだけです。名前は、nginx 構成ファイルのパスに対応している必要があります。

最後の結末

最後に、nginxを起動し、ターミナルコマンドを直接入力します。

nginx

起動したnginx.confファイルを指定する場合

nginx -c / の後にパスが続く

nginxを停止する

nginx -s 停止

nginxを再起動する

nginx -s リロード

Apple M1 チップに nginx をインストールして vue プロジェクトをデプロイする方法についての記事はこれで終わりです。Apple M1 チップに nginx をインストールして vue プロジェクトをデプロイする方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML における iFrame タグの 2 つの使用法

>>: CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論