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

推薦する

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

MySQL水平および垂直テーブル変換操作の実装方法

この記事では、例を使用して、MySQL の水平テーブルと垂直テーブル間の変換操作を実装する方法を説明...

CSS スティッキーフッタークラシックレイアウトの実装

スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...

HTML テーブル タグ チュートリアル (36): テーブル ヘッダーの背景色属性 BGCOLOR

<TH> タグは、テーブル内のヘッダーのプロパティを設定するために使用されます。以下の...

UbuntuでMySQLデータベースファイルディレクトリを変更する方法

序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...

CSS の border 属性と display 属性の使い方の簡単な分析

境界プロパティの概要borderプロパティは要素の境界を設定します。境界線の3要素は、太さ、線の種類...

JavaScript フロー制御 (ループ)

目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...

Linux でのデータベースのスケジュールバックアップの実装スクリプト

目次シナリオ: サーバーデータベースを毎日定期的にバックアップする必要がある1. まずバックアップス...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順

序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...