サーバーサイドレンダリング-Nuxt.jsの包括的なケースリリースとデプロイ

Nuxt.js 開発またはリリース展開で一般的に使用される一連のコマンドを提供します。

プロジェクトのパッケージ化

コマンドリスト

コマンド	説明
nuxt	ホットロードされたWebサーバーを起動します（開発モード）localhost：3000
nuxtビルド	webpackを使用してアプリケーションをコンパイルし、JSおよびCSSリソースを圧縮します（公開用）
nuxt start	Webサーバーを本番モードで起動します（最初にnuxtビルドを実行する必要があります）
nuxt生成	アプリケーションをコンパイルし、ルーティング構成に従って対応するHTMLファイルを生成します（静的サイトの展開に使用）

コマンド設定

追加したプロジェクトのコマンドで使用する必要がありますスクリプト：package.jsonscripts

"scripts": {
    
    
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start"
},

1.本番パッケージでnuxt startコマンドを実行する前に実行2.または、またはなどの適切なコマンドを実行するnuxt build
npm run <command>yarn <command>npm run devyarn dev

パッケージ化されたプロジェクト

プロジェクトのルートディレクトリyarn buildでパッケージ化を実行します。パッケージ化が成功した後のファイルは次のとおりです。

ここに画像の説明を挿入

パッケージ化されたファイルはすべて.nuxtファイルにあり、複数のパッケージ化されたファイルがあります
yarn start通常の起動の場合は、パッケージの起動後にローカルプロジェクトを使用して、正しいパッケージ結果を示します。
パッケージ化されたプロジェクトの開始は、nuxtプロジェクトの開始よりもはるかに高速です

リリース展開

プロジェクトをローカルにパッケージ化した後、オンラインで使用する必要がある場合は、ローカルパッケージをリリースして、ターゲットサーバーに展開する必要があります。パッケージ化された展開を実現するには、さまざまな方法があります。

最も基本的な方法

最も単純で最も伝統的な方法であるプロセスは次のとおりです
。1。設定でホスト+ポートを構成
しnuxt.config.jsますHost + Port

//最简单方式
server: {
    
    
  host: '0.0.0.0', //设置为'0.0.0.0'会监听所有的网卡地址，使其能够对外进行访问
  port: 3000
},

2、圧縮リリースパッケージが
通過しますnuxt buildパック.nuxt、、、、圧縮、使用圧縮ツール。staticnuxt.config.jspackage.jsonpackage-lock.json

3.リリースパッケージをサーバーに転送します。
ここでは、グラフィカルツールXshell+ Xftp（これら2つのソフトウェアをローカルにインストールする必要があります）を使用して、ローカルプロジェクトパッケージをサーバーに転送します。
を開きXshell、サーバーに接続するためのセッション名、ホストIPアドレス、ユーザー名、およびパスワードを入力します。

ここに画像の説明を挿入
サーバーに接続したら、開きますXftp

ここに画像の説明を挿入
左側のプロジェクト圧縮パッケージを右側のサーバーのターゲットディレクトリにドラッグします

ここに画像の説明を挿入
4.コマンドラインで圧縮パッケージが配置されているディレクトリを解凍して入力し、コマンドを実行してファイルパッケージを解凍します
Xshellunzip

5.依存関係のインストール
最初に、サーバーにnode.jsをインストールしてから、npm installインストールプロジェクトの依存関係パッケージを実行する必要があります。インストール後は、下図のようになります。

ここに画像の説明を挿入
6.サービスを開始します

Xshellコマンドラインでnpm run startスタートアッププロジェクトを実行します。
PM2を使用してノードサービスを開始します

サーバー上で直接使用するnpm startコマンドラインでプロジェクトを開始した後、コマンドラインを終了すると、サービスは終了し、アクセスできなくなります。ここでは、PM2ツールを使用してプロジェクトを開始します。PM2は、node.jsプロセスを管理するために特別に使用されるアプリケーションであり、node.jsプロセスをバックグラウンドで実行できます。

PM2で一般的に使用されるコマンド：

コマンド	説明
pm2リスト	pm2が管理するすべてのアプリケーションのリストを表示する
pm2スタート	アプリケーションを起動します
pm2停止	アプリケーションを停止します
pm2リロード	重いアプリケーション
pm2再起動	アプリケーションを再起動します
pm2削除	アプリを削除する

PM2の使用：

//在服务端安装PM2
npm install --global pm2
//启动项目，如：pm2 start npm --start
pm2 start <command>

上記の方法は、従来のプロジェクト展開方法であり、その運用手順を通じて、プロジェクト展開の中間プロセスを理解することができます。ただし、ローカルコードが更新された場合は、上記の手順を繰り返してサーバー上のアプリケーションコードを更新する必要があります。この方法は、頻繁に更新されると単純で面倒です。

自動展開

ここに画像の説明を挿入
上の図に示すように、最新の自動デプロイメントCI/CDは継続的インテグレーション/継続的デプロイメント方式を採用しています。
CI / CDのような多くのサービスがありますJenkins、Gitlab CI、GitHub Actions、Travis CI、Circle CI...
と次GitHub Actionsの例：

環境への備え

Linuxサーバー
ローカルコードをGitHubリモートウェアハウスに送信する
GitHubアクセストークンを構成し、CI / CDでGitHubのIDトークンを使用してGitHubウェアハウスを開き、右上隅にあるユーザープロファイル画像をクリックして、を選択します。でページを選択入力するページを。を選択し、をクリックして、トークンの生成ページでトークンの名前を入力し、GitHubリポジトリを操作する権限を確認し、下部にある[トークンの生成]ボタンをクリックしてページに戻り、生成されたを確認します。
GitHubsettings

settingsDeveloper settingsDeveloper settings

Personal access tokensGenerate new token

token

ここで生成されたトークンは1回しか表示されないため、簡単に使用できるように保存することをお勧めします。

プロジェクトのGitHubウェアハウスを入力>クリックsettings>クリックsecrets>クリックNew secret、新しいsecretページを入力、作成したページを入力token、クリックAdd secret

ここに画像の説明を挿入

スクリプトを実行するようにGitHubアクションを構成する

1.プロジェクトのルート.github/workflowsディレクトリの下に新しいディレクトリを作成します

この特定のファイルディレクトリを識別して次のファイルをロードする必要.github/workflowsがGitHub Actionsあるため、ここでのファイルディレクトリの名前はである必要があります。

2.ダウンロードmain.ymlへのダウンロードリンク：https://github.com/zimeng303/realworld-nuxt/blob/master/.github/workflows/main.yml.github/workflows

3.main.yml構成を変更します

注：
1。ここは作成された名前と一致GITHUB_TOKENしgithubている必要があります2. HOST、USERNAME、PASSWORD、PORT、および情報はリモートサーバーと一致している必要があります3.アドレス変更の圧縮パッケージをダウンロードして実際のアドレスを取得しますsecretstoken

githubrelease

name: Publish And Deploy Demo
# 提交 以 V 开头的命令时，才会触发自动部署
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    # 打压缩包（release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json）
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${
    
    {
    
     secrets.TOKEN }} # 必须和在github的secrets中添加的token名一致
      with:
        tag_name: ${
    
    {
    
     github.ref }}
        release_name: Release ${
    
    {
    
     github.ref }}
        draft: false #不是草稿
        prerelease: false #不是预发布版

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${
    
    {
    
     secrets.TOKEN }}
      with:
      	# release 上传路径、名称配置
        upload_url: ${
    
    {
    
     steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
      	# 在Secrets中，配置远程服务器的HOST、USERNAME、PASSWORD、PORT
        host: ${
    
    {
    
     secrets.HOST }}
        username: ${
    
    {
    
     secrets.USERNAME }}
        password: ${
    
    {
    
     secrets.PASSWORD }}
        port: ${
    
    {
    
     secrets.PORT }}
        # 下面的 release 地址 ，修改为 自己的
        script: |
          rm -rf /root/realworld-nuxtjs/
          mkdir /root/realworld-nuxtjs
          cd /root/realworld-nuxtjs          
          wget https://github.com/***/****/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

必要なホスト、ポート、ユーザー名、およびパスワードをプロジェクトgithubのシークレットに構成します

ここに画像の説明を挿入
4.PM2構成ファイルを作成しますpm2.config.json

{
    
    
    "apps": [
        {
    
    
           "name": "RealWorld",
           "script": "npm",
           "args": "start"
        }
    ]
}

5.github更新をに送信します

プロジェクトのルートディレクトリで次のコマンドを実行します

//本地提交
git add .
//本地打版
git tag v0.1.0
//将本地版提交到github仓库
git push origin v0.1.0

実行が成功したら、できるgithubに提出されたラベルを参照してください
ここに画像の説明を挿入
actionsパネル

6.ビュー自動展開ステータス。自動配信のステータスを表示
上のreleaseパネル。展開が成功した場合は、あなたが表示されますreleaseパッケージ

7.訪問にサイトをクライアント

ここに画像の説明を挿入

記事リスト

サーバー側レンダリング基本的な
 サーバー側レンダリング-Nuxt.js基本的な
 サーバー側レンダリング-Nuxt.js包括的なケース
 サーバー側レンダリング-Nuxt.js包括的なケースリリース展開サーバー側レンダリング -VueSSR
構築