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

推薦する

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

MySQL 5.7.24 のインストールと設定方法のグラフィックチュートリアル

MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...

Reactでレシピシステムを実装する方法を解説した記事

目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...

Vue+Vantはトップ検索バーを実装します

この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...

ftp は SSH 経由で Linux にリモート接続します

まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

Dockerコンテナが外部ネットワークにpingできない問題を解決する

今日、docker で redis 環境を構築していたところ、yum がリソースを取得できず、インタ...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

トラフィックの多いウェブサイト向けのソリューション

まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...

アイデアを war パッケージにパッケージ化し、tomcat にデプロイしてアクセス パスの問題 (図とテキスト)

Web プロジェクトを war にパッケージ化するアイデアにとって最も重要なことは、アトリフィカを...

JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

VMware 仮想マシン ubuntu18.04 インストール チュートリアル

インストール手順1. 仮想マシンを作成する 2. [カスタム(詳細)]を選択し、[次へ]をクリックし...