preface

With the emergence of various front-end frameworks for Vue, React and Angular client rendering, the single-page application (SPA) built by these frameworks has the advantages of good user experience, good rendering performance and high maintainability, but also has some disadvantages, such as:

  • The loading time of the first screen is too long

Different from traditional server rendering that directly obtains the HTML rendered by the server, single-page application uses JavaScript to generate HTML on the client to present the content, and users need to wait for the completion of JS parsing on the client to see the page, which makes the loading time of the first screen longer, thus affecting user experience.

  • Is not conducive to SEO

When a search engine crawls the HTML file of a web site, the HTML of a single-page application has no content, because it requires client-side JavaScript parsing to generate web content, and the mainstream search engines are not good at capturing this part of the content.

To solve these two problems, server-side rendering methods can be implemented. Let’s start with:

How to implement traditional server-side rendering: In the earliest days, Web page rendering was done on the server side, that is, the server side rendered the required data into HTML, combined with the page template, and responded to the client browser. So the browser renders a page that contains content directly. It is the development mode of the front end is not separated.

Modern server rendering (isomorphic rendering) : it is a combination of server rendering + client rendering to achieve, on the server side, once to achieve the server side rendering (first screen straight out), on the client side, again to take over the page interaction, the core to solve SEO and the first screen rendering slow problem.

  1. The client initiates a request
  2. The server side renders the first screen content + generates spA-related resources of the client side
  3. The server sends the generated first-screen resource to the client
  4. The client directly displays the first screen rendered by the server
  5. Spa-related resources in the front screen activate the client after execution
  6. All subsequent client interactions are handled by the client SPA

The advantages and disadvantages:

  • Advantages: Fast first screen rendering, SEO benefit
  • Disadvantages:
    • Development costs are high.
    • Deployment has requirements that require a Node runtime environment
    • More server load, use caching strategy wisely
    • Some frameworks do not support the lifecycle, and there is no window, document, etc

Nuxt project creation and configuration

Create a project

The nuxt.js documentation provides two ways to create a project. Instead of using scaffolding to create a project, I will initialize a project myself for example.

Create a project folder
mkdir nuxt-demo

# Initialize package.json file
npm init -y

# installation nuxt
npm install nuxt

# configure package.json, add command
"dev": "nuxt"// Run this command for local development"build": "nuxt build"// Generate a package file"start": "nuxt start"// Use the generated package file to open a service for accessCreate the nuxt.config.js configuration file
Copy the code

Preparations for deployment to the server

  • Nuxt. Config. Js configuration
// Allow the server to use IP access, otherwise the default is localhost, configure the port number, default is 3000
module.exports = {
  server: {
    host: '0.0.0.0'.port: 3000}},Copy the code
  • Create a pM2 configuration file (pm2.config.json), which is used to start the service on the server
{
  "apps": [{"name": "realworld".// Give the current project the name used when the server starts the service
      "script": "npm"."args": "start"}}]Copy the code

Prepare a server and configure the Node environment

Preparing the Server Account

After you purchase a server, create a server instance and set the root account and password for connecting to the server over SSH

Download node to the server and configure it

  • Use SSH to connect to the server
// Open the command terminalSSH root@SERVER IP address// root is an account. If you set this account, change it to your own account
Copy the code
  • Download the Node package and configure it
// Download to the root directory, you can set your own download directory
// Jump to the root directory
cd /
/ / download
wget https:/ / nodejs.org/dist/v14.15.3/node-v14.15.3-linux-x64.tar.xz
// Decompress the package. The decompression command varies according to the downloaded package suffix
tar xvf node-v1415.3.-linux-x64.tar.xz
// Check whether the decompression is successfulLs minus L or LS minus A// Check if there is a corresponding file

// Configure soft links for node and NPM so that node and NPM can be used globally
ln -s /node-v1415.3.-linux-x64/bin/node /usr/bin/node // /node-v14.15.3- Linux -x64/bin/node is the file path
ln -s /node-v1415.3.-linux-x64/bin/npm /usr/bin/npm  // /node-v14.15.3-linux-x64/bin/npm is the file path

// Check whether the configuration is successful. Go to another file directory and run the following command to view the version
node -v  
npm -v

// This will do for most servers. If not, you can configure environment variablesVi/etc/profile"i"Key to enter file editing mode and add the following code at the endexport NODE_HOME=/ node - v14.15.3 - Linux - x64 /Export PATH=$PATH:$NODE_HOME/bin
exportNODE_PATH = $NODE_HOME/lib/node_modules then"esc"To exit the editing mode, press again"shift + :"Enter wq to save the configuration. The last input"source /etc/profile"Updating environment variablesCopy the code
  • Install pM2 globally
/ / download
npm install pm2 -g

// Configure the soft link
ln -s /node-v1415.3.-linux-x64/bin/pm2 /usr/bin/pm2  // /node-v14.15.3-linux-x64/bin/pm2 is the installation path
// Run the pm2-list command to check whether the configuration is successful
pm2 -list
Copy the code

Package the project and deploy it to the server

Manual deployment

  • Execute it locally firstnpm run buildThe command
  • Compress the following six files and folders together
    • The.nuxt folder is packed after the generated files are in it
    • Static is the project’s static resource file
    • Nuxt.config. js, package.json, package-lock.json, pm2.config.json

  • Send the packed compressed file to the server directory over SSH
    • If you want to use the current IP address and port number to access, after login, directly decompress in the current directory
    • If you want to access the domain through your own secondary domain, go to the directory of your secondary domain and decompress it
    • Decompress one of the preceding methods and run the command in the decompressed file directorynpm iCommand to download dependency packages.
    • Start the service under the project file and execute the commandpm2 start ./pm2.config.jsonIn this case, you need to use the configuration file to start the service for the first time. After the second time, you can start the service in any directory by using the service name set in the configuration filePm2 start name.
    • Once the service is enabled, it can be accessed by IP or domain name.
  • Common PM2 commands
    • Viewing the Service Listpm2 list
    • Open the servicePm2 start service name | | service id | | configuration file pathThree ways
    • Stop the servicePm2 stop service name | | service id
    • Remove the servicePm2 delete service name | | service id
    • The rest can be viewed in the PM2 documentation

Automatic deployment through GitHub

  • Create in the project root directory.github/workflows/main.ymlFiles, fixed folders and files. Download address:main.yml. It is recommended to download and save directly, in case of multiple Spaces or other things.
name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'

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

    # Download source code
    - name: Checkout
      uses: actions/checkout@master

    # Package build
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # Release Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}  # Config on Github
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false
        prerelease: false

    Upload build results to Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }} # Config on Github
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    Deploy to the server
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }} # github configuration, server IP address
        username: ${{ secrets.USERNAME }} # Github configuration, server instance account
        password: ${{ secrets.PASSWORD }} # config on Github, server instance password
        port: ${{ secrets.PORT }} # github SSH port 22
        script: |
          cd /home/ubuntu/nuxt-realworld-demo  # decompressed project path on the serverWget https://github.com/GitHub address (the only change here, Don't move)/releases/behind the latest/download/the TGZ -o the TGZ tar ZXVF the TGZ NPM install - production pm2 reload pm2.config.jsonCopy the code
  • Go to GitHub to configure the parameters to be used
    • Enter the pageSettings > Developer settings > Personal access tokens, copy the created token

  • Go to the project repository and click on the project Settings to create the secret required by main.yml

  • How to Deploy automatically

GitHub deployment will not be triggered when you submit code to a tag that starts with a ‘V *’. Here’s how:

# suppose you want to commit the code now
git add .
git commit -m 'Comment text'Git tag v0.1.0 git Push Origin v0.1.0 triggers automatic deployment to the GitHub project repository'Actions'You can view the current deployment statusCopy the code

If the deployment succeeds, you can directly access the specified access address. If the access succeeds, the deployment succeeds. If the access fails, click in the preceding figure to view the cause of the error.

That’s it, guys who feel good, give it a thumbs up