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

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によってブロックされるかどうかについての簡単な議論

推薦する

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

SVN のインストールと基本操作 (グラフィック チュートリアル)

目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...

MySQLのロック機構の詳細な説明

序文データの一貫性と整合性を確保するために、あらゆるデータベースにはロック メカニズムが備わっていま...

Dockerにelasticsearchとkibanaをインストールする方法

Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...

ポートマッピング後に Docker コンテナが突然接続に失敗する問題のトラブルシューティング プロセス

1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...

Linux Samba サーバーの超詳細なインストールと構成 (問題解決付き)

目次Samba サーバーの紹介Samba サーバー コンポーネントSamba サーバー関連の設定ファ...

TCPソケットSYNキューとAcceptキューの差異分析

まず、「LISTENING」状態の TCP ソケットには 2 つの独立したキューがあることを理解する...

CSS ボックスを中央揃えするためのよく使われるいくつかの方法 (要約)

最初のもの: CSSの位置プロパティの使用 <スタイル タイプ="text/css&...

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...

CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。

最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...

JavaScript の数値および数学オブジェクトの概要

目次1. JavaScript における数値2. Javascript の Math オブジェクト1...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...