Vueプロジェクトのパッケージングと展開の実際のプロセスの記録

序文

Vue を使用してフロントエンド プロジェクトとバックエンド プロジェクトを分離する場合、通常、フロントエンドは別々にデプロイされ、ユーザーもフロントエンド プロジェクト アドレスにアクセスします。そのため、フロントエンド開発者は、プロジェクトのデプロイ プロセスとさまざまな問題の解決策に精通していることが非常に重要です。 Vue プロジェクトのパッケージ化と展開自体は複雑ではありませんが、フロントエンドを学ぶ学生の中にはサーバーとあまり接する機会がなく、展開プロセス中にさまざまな問題に遭遇する人もいます。この記事では、nginx サーバーを使用してフロントエンド プロジェクトをプロキシする方法と、プロジェクトの展開に関連する問題について説明します。コンテンツの概要:

1. 準備 - サーバーとnginxの使用

1. サーバーを準備する

私はUbuntuシステムを使用していますが、Linuxシステムの操作も同様です。サーバーがない場合はどうなりますか?

体験したいだけなら、Huawei Cloud 無料トライアルなど、大手メーカーのクラウドサーバーの無料トライアルパッケージを試すことができます。この記事の関連操作は Huawei Cloud 上で完了します。ただし、頻繁に練習したい場合は、前述のHuawei CloudやAlibaba Cloudなどの信頼性の高いクラウドサーバーを購入するとよいと思います。私の個人ウェブサイトは Alibaba Cloud 上に展開されています。プロモーションリンクをクリックして購入できます。最近、初回購入が年間 100 元未満になるイベントがあります。

2. nginxをインストールして起動する

荷物を軽くして旅行しましょう。この部分についてはあまり詳しく説明しません (結局のところ、オンラインには関連するチュートリアルがたくさんあります)。通常の場合、必要なのは次の 2 つのコマンドだけです。

# インストール。インストールが完了したら、nginx -v を使用して確認します。nginx バージョン情報の出力がインストールが成功したことを示している場合は、sudo apt-get install nginx
# sudo service nginx start を開始します

起動後、通常は http://server ip または http://domain name に直接アクセスすることで、nginx サーバーのデフォルト ページを表示できるはずです (この記事で使用しているサーバーはドメイン名が設定されていないため、ip を使用しています。この記事に関する限り、ドメイン名と ip に大きな違いはありません)。アクセスできない場合は、クラウド サーバーのデフォルトの http サービス ポート (ポート 80) が外部に公開されていない可能性があります。サーバー セキュリティ グループで設定してください。

3. nginxを理解する: nginxサーバーが作成したファイルをプロキシするようにnginx設定を変更する

nginx の設定を確認します。Linux システムの設定ファイルは通常、/etc ディレクトリに保存されます。nginx の設定ファイルは /etc/nginx フォルダーにあります。/etc/nginx/sites-available/default ファイルを開きます (nginx には複数の設定ファイルがある場合があります。通常は、このファイルを変更して nginx を設定します)。

デフォルトでは、nginx プロキシのルート ディレクトリは /var/www/html であることがわかります。http://server ip と入力すると、このフォルダー内のファイルにアクセスし、index の設定値に従って、index.html、index.htm などのデフォルトのアクセス ファイルが見つかります。

ルート値を変更して、nginx サービス プロキシが配置されているフォルダーを変更できます。

/www フォルダを作成し、index.html を作成し、文字列「Hello world」を書き込みます。

mkdir /www
echo 'Hello world' > /www/index.html

ルート値を/wwwに変更します

sudo nginx -t nginxの設定が正しいか確認する

nginx の設定をロードします: sudo nginx -s reload

もう一度ページにアクセスすると、ページ コンテンツが作成した index.html になっていることがわかります。

2. Vueプロジェクトのパッケージ化とリモートサーバーへのファイルの同期

1. 包装

デフォルトでは、vue-cli で作成されたプロジェクトの場合、package.json 内のスクリプトにビルド指示が設定されており、yarn build または npm run build を直接実行できます。

2. リモートサーバーに同期する

Vue プロジェクトをデプロイするために nginx を使用します。これにより、基本的に、Vue プロジェクトのパッケージ化されたコンテンツが nginx によって指定されたフォルダーに同期されます。前の手順では、作成したフォルダーを指すように nginx を構成する方法についてすでに説明しました。残りの質問は、前の手順で作成した /www に同期するなど、パッケージ化されたファイルをサーバー上の指定されたフォルダーに同期する方法です。ファイルを同期するには、git-bash または powershell で scp コマンドを使用できます。Linux 環境で開発している場合は、rsync コマンドも使用できます。

scp -r dist/* [email protected]:/www
または rsync -avr --delete-after dist/* [email protected]:/www

ここで、および以降の手順では、リモート同期に root が使用されることに注意してください。特定の状況に応じて、root と ip を置き換える必要があります (ip は独自のサーバー IP に置き換えられます)。

便宜上、yarn を例に、package.json スクリプトに push コマンドを追加できます (npm を使用する場合は、push コマンドの yarn を npm run に変更するだけです)。

 「スクリプト」: {
    "ビルド": "vue-cli-service ビルド",
    「プッシュ」: 「yarn build && scp -r dist/* [email protected]:/www」
  },

この方法では、yarn push または npm run push を直接実行して直接公開することができます。ただし、まだ小さな問題が 1 つあります。つまり、コマンドを実行するときに、リモート サーバーの root パスワードを入力する必要があります (ここでは、リモートに接続するために root が使用されますが、他のユーザーを使用することもできます。結局のところ、root ユーザーの権限は高すぎます)。

コマンドを実行するたびに root パスワードを入力しなくても済むように、ローカル ssh をリモート サーバーの authorized_keys ファイルに同期することができます。

3. SSHキーを同期する

SSH キーの生成: git bash または powershell を使用して ssh-keygen を実行し、SSH キーを生成します。生成されたキーの保存アドレスを尋ねられます。Enter キーを押します。すでに存在する場合は、上書きするかどうかを尋ねられます。

sshキーをリモートサーバーに同期するには、ssh-copy-idコマンドを使用して同期します。

ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected] 

パスワードを入力すると、同期時に再度パスワードを入力する必要はありません。実際、ssh_key はサーバー (ここでは root ユーザーのホーム ディレクトリ) の ~/.ssh/authorized_keys ファイルに同期されます。

もちろん、ローカルの ~/.ssh/id_rsa.pub (pub で終わる公開鍵であることに注意してください) ファイルの内容を手動でコピーし、サーバーの ~/.ssh/authorized_keys に追加することもできます (名前から、このファイルには複数の SSH キーを保存できることがわかります)。

注: プロセス全体では root ユーザーが使用されるため、ファイル操作権限の問題はありません。フォルダーを作成したユーザーがリモート ログイン ユーザーでない場合は、ファイル同期が失敗する可能性があります。この場合、リモート サーバーでフォルダーの読み取りおよび書き込み権限を変更する必要があります (コマンド chmod)。

私はテストプロジェクト（GitHubで表示するにはこのリンクをクリックしてください）[1]を作成し、試してみました。パッケージ化とファイルのアップロードは、たった1つのコマンドで実行できます。

アクセスすると、おなじみのインターフェースが表示されます。

ここまでで、通常の状況での Vue プロジェクトの公開方法の紹介は完了です。次に、非ドメイン ルート パスと履歴ルーティング モード下での公開方法を紹介します。

3. 非ドメインルートパスの解放

場合によっては、同じサーバーと同じポートに、ディレクトリに応じて分割された複数の異なるプロジェクトが存在することがあります。たとえば、プロジェクトを http://a.com/test にデプロイすると、http://a.com/test にアクセスするとプロジェクトのホームページにアクセスでき、プレフィックス test のないアドレスでは他のプロジェクトにアクセスできます。このとき、nginx 構成と Vue パッケージ構成を変更する必要があります。

1. nginxの設定

場所のルールを追加し、アクセス パスを割り当て、アクセス フォルダーを指定するだけです。先ほど作成した /www フォルダーを /test に指定できます。フォルダー名とアクセス パスが一致していないため、エイリアス構成を使用する必要があります。

ここでは、/test 構成を / の前に置く必要があります。つまり、ルートが入力されると、/test が最初に一致することになります。ルート パス / の下のプロジェクトにサブルート /test がある場合、http://xxxx/test は /www 内のプロジェクトにのみアクセスし、サブルートにはアクセスしません。

2. プロジェクト構成

パッケージ化後にリソース パスが正しくない問題を解決するには、vue.config.js で publicPath を設定する必要があります。設定方法は 2 つあり、それぞれ publicPath を ./ と /test に設定します。

nginx の設定を更新すると、公開後に通常どおりアクセスできるようになります。ここでは 2 つの設定方法に違いがあります。その違いを見てみましょう。プロジェクトを設定せずにアクセスを直接公開すると、JS、CSS、その他のリソースが見つからず、空白のページが表示される場合があります。

この問題の原因は、リソース参照パスが正しくないことです。ページ レビュー要素は、ページによって参照される js がルート パスから参照されていることを示しています。

パッケージ化されたファイル構造を見ると、js/css/img/static などのリソース ファイルが index.html と同じレベルにあることがわかります。

publicPath は ./ として設定されており、パッケージ化後のリソース参照パスは相対パスになります。

publicPath は /test として設定され、パッケージ化されたリソースの相対パスはドメイン名のルート ディレクトリから始まる絶対パスです。

どちらの構成でも、JS、CSS、その他のリソースを正しく見つけることができます。ただし、まだ問題が残っています。つまり、static 内の静的リソースがまだ見つからないのです。

3. 絶対パスで参照される静的リソースが見つからない問題

パッケージ化プロセス中、パブリック静的リソースは webpack によって処理されないため、絶対パスを通じて参照する必要があります。プロジェクトがドメイン以外のルート パスにデプロイされている場合、これは非常に面倒です。リソースに正常にアクセスできるように、参照される各 URL の前に process.env.BASE_URL (値は上記で設定した publicPath に対応します) を追加する必要があります。この変数値を main.js の Vue.prototype にバインドして、すべての Vue コンポーネントが使用できるようにします。

Vue.prototype.$pb = process.env.BASE_URL

テンプレートでの使用:

<img :src="`${$pb}static/logo.png`">

ただし、適切な解決策がない、より厄介な問題は、コンポーネント スタイルでパブリック フォルダー内の静的リソースを使用することです。

• 背景画像などに画像を使用する必要がある場合は、テンプレートで使用するのと同じように、インラインで使用するようにしてください。
• スタイル ファイルをインポートする必要がある場合は、補間を使用して index.html にインポートします。

静的リソースの問題に関しては、vue-cli では、リソースをモジュール依存関係グラフの一部としてインポートすることを推奨しています (つまり、アセットに配置して相対パス参照を使用します)。この問題を回避すると、他の利点も得られます。

IV. 履歴モードの展開

デフォルトでは、Vue プロジェクトはハッシュ ルーティング モードを使用します。つまり、URL には # 記号が含まれます。 # 記号とその後の内容は、ルーティング アドレスのハッシュ部分です。通常、ブラウザのアドレスバーのアドレスが変更されると、ブラウザはページを再読み込みしますが、ハッシュ部分が変更されると再読み込みは行われません。これがフロントエンド ルーティングの原理であり、ページ全体を更新せずに、異なるルートに従ってページを部分的に更新できます。 H5 では、履歴用の pushState インターフェイスが追加されました。これにより、フロントエンド操作でページの更新をトリガーせずにルーティング アドレスを変更することもできます。履歴モードはこのインターフェイスを使用して実装されます。したがって、履歴モードを使用すると、ルート内の # 記号を削除できます。

1. プロジェクト構成

vue-router ルーティング オプションでモード オプションとベース オプションを設定し、モードを 'history' に設定します。ドメイン以外のルート ディレクトリにデプロイする場合は、ベース オプションを上記で設定した publicPath 値に設定する必要もあります (注: この場合、publicPath は相対パス ./ ではなく、絶対パス /test 設定形式を使用する必要があります)。

2. nginxの設定

履歴モードでは、プロジェクトがドメイン名の下の /test ディレクトリにデプロイされていると仮定すると、http://xxx/test/about にアクセスすると、サーバーは /test が指すディレクトリの下の about サブディレクトリまたはファイルを検索します。明らかに、これはシングルページ アプリケーションであるため、ディレクトリまたはファイル a は存在せず、404 エラーが発生します。

この場合、サーバーがシングルページ アプリケーションの index.html を返すように nginx を構成し、残りのルーティング解析をフロントエンドで実行できるようにする必要があります。

3. 履歴モードは非ドメインルートパスに展開されます

ドメイン以外のルート ディレクトリにデプロイする場合は、まず publicPath を構成する必要があります。注意が必要な点は、実際に以前にも言及しましたが、この場合、相対パス ./ または空の文字列を使用して publicPath を構成することはできません。なぜ？

理由は、ルータリンクなどのパフォーマンスが低下するためです。テストプロジェクト[2]を使用して、2つの構成をそれぞれパッケージ化して公開します。要素を確認することで違いがわかります。ページには、「ホーム」と「バージョン情報」の 2 つのルーター リンクがあります。

パッケージ化後の 2 つの構成の結果は次のとおりです。

publicPath は ./ または空の文字列として設定されます。

publicPath は /test として構成されています:

router-link パッケージが publicPath を相対パスとして設定すると、アドレスはルート ドメイン名に対する相対アドレスになりますが、これは明らかに誤りです。したがって、非ドメイン ルート パスの展開では、publicPath を完全なプレフィックス パスとして設定する必要があります。

V. 結論

Vue プロジェクトのリリースについて私が言いたいことはこれだけです。私はほぼすべてのステップで落とし穴を経験した上でこれを経験しました。ご質問があれば、お気軽に私と話し合ってください。

参考文献

[1] Vueプロジェクトパッケージリリース: https://github.com/Lushenggang/vue-publish-test

[2] Vueプロジェクトパッケージ展開テストプロジェクトアドレス: https://github.com/Lushenggang/vue-publish-test

Vue プロジェクトのパッケージ化とデプロイメントに関するこの記事はこれで終わりです。Vue プロジェクトのパッケージ化とデプロイメントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。