Lanzamiento e implementación de casos completos de rendering-Nuxt.js del lado del servidor

Nuxt.js Proporciona una serie de comandos de uso común para el desarrollo o la implementación de versiones.

Embalaje del proyecto

Lista de comandos

mando	descripción
nuxt	Inicie un servidor web cargado en caliente (modo de desarrollo) localhost: 3000
compilación nuxt	Utilice el paquete web para compilar aplicaciones, comprimir recursos JS y CSS (para publicar)
inicio nuxt	Inicie un servidor web en modo de producción (primero debe ejecutar nuxt build)
generar nuxt	Compile la aplicación y genere el archivo HTML correspondiente de acuerdo con la configuración de enrutamiento (utilizado para la implementación de sitios estáticos)

Configuración de comandos

Tendrá que utilizar en el comando proyecto añadido a package.jsonla scriptssecuencia de comandos:

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

1. ejecutado nuxt startantes de que se deba ejecutar el comando nuxt buildpara el paquete de producción
2. npm run <command>o yarn <command>ejecute el comando apropiado, como npm run devoyarn dev

Proyecto empaquetado

Ejecute el yarn buildempaquetado en el directorio raíz del proyecto y los archivos después del empaquetado exitoso son los siguientes

1. Los archivos empaquetados están todos en el archivo .nuxt y hay más de un archivo empaquetado
2. Utilice yarn startel proyecto local después del paquete de inicio, si comienza normalmente, lo que indica los resultados de empaquetado correctos.
3. Iniciar el proyecto empaquetado es mucho más rápido que iniciar el proyecto nuxt

Implementación de lanzamiento

Una vez que el proyecto se empaqueta localmente, si es necesario utilizarlo en línea, el paquete local debe liberarse y desplegarse en el servidor de destino Hay muchas formas de lograr la implementación empaquetada.

La forma más básica

La forma más simple y tradicional, el proceso es el siguiente:
1. Configure Host + Port
en la nuxt.config.jsconfiguraciónHost + Port

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

2, el paquete de la versión de compresión
pasará a través de nuxt buildla manada .nuxt,, static, nuxt.config.js, package.jsoncompresión,package-lock.json herramienta de uso de compresión.

3. Transfiera el paquete de lanzamiento al servidor
Aquí, las herramientas gráficas Xshell+ Xftp(es necesario instalar estos dos software localmente) se utilizan para transferir el paquete del proyecto local al servidor.
Abra Xshell, ingrese el nombre de la sesión, la dirección IP del host, el nombre de usuario y la contraseña para conectarse al servidor:

Después de conectarse al servidor, abraXftp

Arrastre el paquete comprimido del proyecto a la izquierda al directorio de destino del servidor a la derecha

4. Descomprima e ingrese al directorio donde se encuentra
el Xshellpaquete comprimido en la línea de comando, ejecute el unzipcomando para descomprimir el paquete de archivos

5. Instale las dependencias
Primero, debe instalar node.js en el servidor y luego ejecutar el npm installpaquete de dependencias del proyecto de instalación. Después de la instalación, es como se muestra en la siguiente figura:

6. Inicie el servicio

• XshellEjecute el npm run startproyecto de inicio en la línea de comando .
• Inicie el servicio de nodo utilizando PM2

Úselo directamente en el servidor npm startDespués de iniciar el proyecto en la línea de comando, una vez que salga de la línea de comando, el servicio se termina y no se puede acceder. Aquí usaremos la herramienta PM2 para iniciar el proyecto. PM2 es una aplicación especialmente utilizada para administrar el proceso node.js, que puede hacer que el proceso node.js se ejecute en segundo plano.

Comandos de PM2 de uso común:

mando	descripción
lista pm2	Ver la lista de todas las aplicaciones administradas por pm2
pm2 inicio	Iniciar aplicación
pm2 parada	Detener aplicación
recarga de pm2	Aplicación pesada
pm2 reiniciar	Reiniciar aplicación
pm2 eliminar	Eliminar aplicación

Uso de PM2:

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

El método anterior es un método de implementación de proyectos tradicional. A través de sus pasos de operación, podemos comprender el proceso intermedio de implementación de proyectos. Pero si nuestro código local se actualiza, debemos repetir los pasos anteriores para actualizar el código de la aplicación en el servidor. Este método es simple y problemático una vez que se actualiza con frecuencia.

Despliegue automatizado

Como se muestra en la figura anterior, la implementación automática moderna adopta CI/CDel método de integración continua / implementación continua.
CI / CD hay muchos servicios, como por ejemplo Jenkins, Gitlab CI, GitHub Actions, Travis CI, Circle CI...
siguiendo con GitHub Actionsun ejemplo:

Preparación ambiental

• Servidor Linux
• Envíe el código local al almacén remoto de GitHub
• Configure el token de acceso de GitHub, use el token de identidad de GitHub en CI / CD para abrir el almacén de GitHub , haga clic en la imagen de perfil del usuario en la esquina superior derecha y seleccione . En la página, seleccione para ingresar a la página. Seleccione , haga clic , complete el nombre del token en la página de generar token y verifique el permiso para operar el repositorio de GitHub, y haga clic en el botón Generar token en la parte inferior para volver a la página y ver el archivo .
  GitHubsettings

settingsDeveloper settingsDeveloper settings

Personal access tokensGenerate new token

token
  

El token generado aquí solo se muestra una vez, por lo que es mejor almacenarlo para facilitar su uso

Ingrese al GitHubalmacén del proyecto > haga settingsclic secrets> haga clic > haga clic New secret, ingrese a la nueva secretpágina, ingrese la creada token, haga clicAdd secret

• Configurar acciones de GitHub para ejecutar scripts

1. Cree un nuevo .github/workflowsdirectorio en el directorio raíz del proyecto.

El nombre del directorio de archivos aquí debe ser .github/workflows, porque es GitHub Actionsnecesario identificar este directorio de archivos específico y cargar el siguiente archivo

2. Descarga main.ymlde .github/workflowsla
enlace de descarga: https://github.com/zimeng303/realworld-nuxt/blob/master/.github/workflows/main.yml

3. Modificar la main.ymlconfiguración

Nota:
1. aquí GITHUB_TOKENdebe estar en githubla secretscreada tokennombre consistente
2. donde host, nombre de usuario, puerto y la información debe ser consistente con el control remoto del servidor
3. Descargar el paquete comprimido de cambios de dirección por sí mismos githubla releasedirección real

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

Configure el HOST, PORT, USERNAME y PASSWORD requeridos en los secretos del proyecto github

4. Cree un PM2archivo de configuraciónpm2.config.json

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

5. githubEnvíe actualizaciones a

Ejecute los siguientes comandos en el directorio raíz del proyecto

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

Después de que la ejecución sea exitosa, puede githubver la etiqueta enviada en el

actionspanel

6. Ver el estado de implementación automática. Ver el estado de implementación automática
en el releasepanel. Si la implementación es exitosa, verá el releasepaquete

7. Visite el sitio en el cliente

Lista de artículos

Del lado del servidor de representación básica
del lado del servidor de renderización-Nuxt.js básica
integral del lado del servidor de renderización-Nuxt.js caso
de despliegue global de desbloqueo del compartimiento del lado del servidor de renderización-Nuxt.js
construcción del lado del servidor de renderización-Vue SSR