前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)，跟着做了一遍，由于本人是第一次尝试，遇见了很多问题。经过查阅和搜索，终于解决掉了。下面给大家介绍一下我的流程和遇见的问题，我们可以多讨论。
项目打包部署
1. 準備
完全な Vue プロジェクト
サーバー
準備は非常に簡単です。必要なのはプロジェクトとサーバーだけです。プロジェクトは HTML ファイルだけでもかまいません。
2. Vue プロジェクトを初期化します。vue
-cli スキャフォールディングを使用して最も単純なプロジェクトを構築し、vue create プロジェクト名を使用して、npmserve を使用してプロジェクトを実行します。
3.サーバーへ
の
Nginx のインストール 広く使用されている当社の Web サイトは Nginx サーバー上にデプロイされています。もちろん、他の Web サーバーを選択することもできます。ここでは主流の Nginx を使用します。
ここでのサーバーは Centos システムなので、例として Centos を使用します。
サーバー側の構築
仮想マシン ソフトウェアをダウンロードし、サーバーを構築するには、まず適切なミラー イメージが必要です。ミラー イメージは Ali https://developer.aliyun.com/mirror/?spm=a2c6h.25603864.0.0 にアクセスしてダウンロードできます。 a21c66ed4X1vdL ダウンロード
ダウンロードするときは、最小バージョンを使用しないことをお勧めします。最小バージョンは合理的すぎて使用できない命令が多いため、安心してください。
ダウンロード後、ミラーイメージをデフォルトの状態までインストールします。
インストール中に発生した場合
オペレーティング システムを後でインストールすることを選択します。システム タイプとして Linux を選択し、デフォルトでハードウェア設定を変更し、仮想マシン設定で変更します。
その後、通常通りプロジェクトを開始し、最後にサーバーに来てnginxをインストールします。
nginx を
サーバーにインストールし、サーバーで yum install -y nginx コマンドを入力して nginx をインストールします。nginx が
見つからないというメッセージが表示された場合は、ソースを変更する必要があることを意味します。コマンド
rpm -uvh http://nginx .org/packages/centos/7/ noarch/rpms/nginx-release-centos-7-0.el7.ngx.noarch.rpm
ソースが正常に変更されたら、nginx を再インストールします。コマンド whereis nginx を使用して、nginx が正常にインストールされているかどうかを確認します。
4. nginx を起動し、
サーバー上で nginx と入力して Enter を押します。
コマンド netstat -ntlp を入力してポート占有率を表示すると、nginx がポート 80 を占有していることがわかります。
この時点で、ブラウザを開き、仮想マシンの IP を入力して Enter キーを押すと、次の図が表示されます。つまり、nginx が正常に起動します。
nginx を起動しても、ip を入力しても Web ページが表示されない場合は、ポート 80 が開いていない可能性があります。解決方法については、 Nginx をインストールした後に CentOS がポート 80 にアクセスできない場合の解決方法を参照してください。
nginx を停止するには、nginx -s stop コマンドを入力します。
5. nginx 構成ファイルを変更します。
コマンド whereis nginx を使用して、nginx のインストール ディレクトリをクエリします。一般的に、/etc/nginx は nginx 設定ファイルの保存場所です。cd /etc/nginx を実行して変更フォルダーに入り、nginx.conf ファイルを変更し、ターゲット サーバーで listen 80 を見つけて、ポート 80 をポート 9000 に変更します (ポート 9000 が開いていない場合は、最初にポートを開くことを忘れないでください)。rootに相当するパスを、これからアップロードするパッケージが格納されているパスに変更し、/home/www/distに変更することを推奨します。次に、「保存」を起動します。vim コマンドを使用するように nginx.conf を変更します。
ただし、私のファイルは少し特殊です。デフォルトの構成ファイル ディレクトリは、/etc/nginx/conf.d フォルダー内のdefault.conf です。
変更後、コマンド nginx -s reload を入力して再起動します。
6. 新しいプロジェクト フォルダーを作成します
。ホーム フォルダーに新しい www フォルダーを作成することをお勧めします。具体的な操作は、コマンド cd /home でホーム フォルダーに入り、コマンド mkdir www で新しい www フォルダーを作成し、dist後続のプロジェクトがパッケージ化された後、ファイルは dist フォルダーになるため、フォルダーを作成する必要はありません。
7. vue プロジェクトをパッケージ化してデプロイする
vue プロジェクトに戻り、npm run build を使用してプロジェクトをパッケージ化します。パッケージ化後、プロジェクト内に dist フォルダーが生成されます。次にサーバーにアップロードします。
アップロードには 2 つの方法があります。
最も簡単な方法は、ftp ツールを使用してドラッグ アンド ドロップしてアップロードすることです。たとえば、finalshall
このコマンドを使用する 2 番目の方法は、プロジェクトで cmd ウィンドウを開き、コマンド
scp -r dist/ [email protected]:/home/www を入力することです。青い部分は ip です。自分の ip を忘れずに置き換えてください。
(IP がわからない場合は、サーバー上でコマンド ifconfig を使用して IP を確認できます)
この時点で、ブラウザを開いて ip:9000 と入力して、プロジェクト ページを確認します。
8. ルート更新の 404 問題を解決する
ルートを切り替えてページを更新すると、404 が表示されます。これは、vue プロジェクトがヒストリールーティング方式を採用しているためですが、主な理由は、vue がシングルページのアプリケーションであり、詳細については自分で学習できるためです。
問題の解決策:
(1) ルーティング モードをハッシュに変更します
(2) nginx 構成を変更します:
location / { try_files $uri $uri/ /index.html; — ページ更新 404 問題を解決します} 変更後、nginx を再起動し、この時点ではブラウザに 404 は表示されません。