LinuxサーバーにVueプロジェクトをデプロイする

ケース1

vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロードし、サーバーにノードをインストールし、vueプロジェクトを開始します。

まず、ローカルにvueプロジェクトがあり、起動後に通常通りアクセスできます。

ローカルパッケージング後、直接アクセスすることもできます

パッケージ化後に index.html ページが空白の場合は、プロジェクトのルートパスに新しい vue.config.js を作成し、再パッケージ化する必要があります。

LinuxサーバーにNode.jsをインストールするには、

# ノードの圧縮パッケージをダウンロードします。コマンドが実行されるパスがダウンロード先のパスになります。wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz      
# 圧縮パッケージを /usr/local/bin/ パスに切り取り、解凍します tar -xvf node-v12.16.1-linux-x64.tar.gz       
# フォルダ名をNodeJsに変更します   
  mv node-v12.16.1-linux-x64 NodeJs  
# gccをインストールする        
  yum で gcc をインストールします。gcc-c++            
# /usr/local/bin/NodeJs/bin パスには 3 つのファイルがあります: node npm npx
# これら 3 つのファイルにソフトリンクを設定します。/usr/bin ディレクトリはシステムコマンドの保存に使用されます。このとき、任意のパスで node を実行することは、/usr/local/bin/NodeJs/bin/node パスのファイルを実行することと同じです。node を実行すると、node 環境に入ります。ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
  NodeJs の bin に npm を追加します。          
  ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx         
# ルートディレクトリに入る cd
# ノードを検証する

VueプロジェクトをLinuxサーバーにアップロードし、コンパイルして実行する

# vueプロジェクトのルートディレクトリに入る cd /home/web
# 依存関係をインストールする npm install
# コンパイルしてパッケージ化する npm run build
# プロジェクトを開始する npm run serve

テスト

エラーの概要

Linux サーバー上でプロジェクトをコンパイルすると、ノードバージョンが低すぎることを示す次のエラーが報告されます。

Linuxサーバー上でプロジェクトをコンパイルすると、ノードバージョン17.1.0が高すぎることを示す次のエラーが報告されます。

解決策、参考資料

# 以前にyumを使用してnodeをインストールしたことがある場合は、アンインストールして再インストールする必要があります。インストール手順については、このブログの`source package`を使用したインストール方法を参照してください。# nodejsをアンインストールする
  yum 削除 nodejs npm -y
# /usr/local/lib に入り、すべての node および node_modules フォルダを削除します # /usr/local/include に入り、すべての node および node_modules フォルダを削除します # /usr/local/bin に入り、node 実行可能ファイルを削除します

プロジェクトのコンパイル時または開始時に「権限が不十分です」というエラーメッセージが表示される場合

解決

# 指定されたファイルの権限を設定する chmod 777 /home/web/xxx

プロジェクト実行時のエラー: --fix オプションで修正可能な警告

解決策: プロジェクトの package.json の "lint": "vue-cli-service lint" を eslint --fix --ext .js,.vue src に変更します。

参照する

ケース2

vue-cliはvue3プロジェクトをビルドし、パッケージ化後にdistファイルをtomcatに配置します。

Linux サーバーに Tomcat をインストールする

# docker を使用して tomcat コンテナをプルします docker pull tomcat   
# docker run -d -p 8080:8080 tomcat をバックグラウンドで起動します    
# 起動後、ブラウザはhttp://192.168.0.102:8080/にアクセスし、404を返します。
＃ 解決：
# ポート 8080 を外部に開きます。firewall-cmd --zone=public --add-port=8080/tcp --permanent  
# 有効にするにはファイアウォールを再起動します。firewall-cmd --reload     
# tomcatコンテナに入る docker exec -it 実行中のコンテナID /bin/bash     
# webapps.dist ディレクトリ内のすべてのファイルを webapps パスにコピーします cp -r webapps.dist/* ./webapps        
# webapps.dist ディレクトリを削除します rm -rf webapps.dist           
# これでブラウザから tomcat ページにアクセスできますが、再起動後も tomcat イメージには 404 が表示されます。現在変更されているコンテナを新しいイメージとして送信する必要があります。# コンテナを停止せずに終了 ctrl + p + q                  
# 実行状態のカスタム コンテナを送信します。tomcat10:10.1 はカスタム イメージ名とバージョン番号です。docker commit -a="Author" -m="Notes" 実行中のコンテナ ID は tomcat10:10.1 です。       
#現在のTomcatコンテナを停止します。dockerは実行中のコンテナIDを停止します。    
# docker rm を実行した後、コンテナ ID を削除します    
# 送信したイメージを起動します docker run -d -p 8080:8080 tomcat10:10.1         
 
# 補足# tomcat イメージを起動すると、エラーが報告されます: ドライバーはエンドポイント quirky_allen で外部接続のプログラミングに失敗しました
# エラーの原因: バックエンド プロジェクトが以前に開始されたときにポート 8080 が占有されていたため、バックエンド プロジェクトを終了する必要があります # テストするには、http://192.168.0.102:8080 にアクセスし、正常に起動したことを示す tomcat ページを確認します

パッケージ化されたプロジェクトをTomcatコンテナに入れる

# 共有フォルダを作成する mkdir -p /home/mydocker/mytomcat8080/data
# コンテナ 8080 を起動します:
  docker 実行 \
  -p 8080:8080 \
  --name my-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -d \
  トムキャット10:10.1
# コンテナの起動時にエラーが発生しました: docker: 参照形式が無効です。
# エラーの原因: docker コマンドの記述が間違っています。ここでは -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \ と記述しました。コロンの後に余分なスペースがあります。# vue プロジェクトのルート ディレクトリを入力し、パッケージ化後に dist フォルダーを生成します。ここでは、ケース 1 のプロジェクト npm install を引き続き使用します。
  npm 実行ビルド
# パッケージ化されたファイルをTomcatにコピーする
  mv dist /home/mydocker/mytomcat8080/data
#Tomcatコンテナを再起動します。docker restart tomcat container id
# テスト、ローカルアクセス http://192.168.0.102:8080/dist/