SPA部署 | Quasar Framework 中文网

Quasar CLI with Webpack - @quasar/app-webpack

SPA部署

存在许多允许轻松部署应用程序的服务。列出所有这些将不可能，因此我们将重点介绍一般部署过程和一些常见服务的具体情况。

如果您最喜欢的部署工具缺失，可随时在GitHub上创建拉取请求（pull request），将其添加到列表中。

一般部署

部署Quasar SPA的第一步是始终为您的文件构建一个生产版本包，从而摆脱开发声明并压缩源代码。

使用Quasar CLI生成这样的构建, 调用以下命令:

$ quasar build

此命令将以SPA模式构建您的项目，并将您的生产版本包输出到新创建的文件夹/dist/spa。

要为您的生产版本文件提供服务，必须使用Web服务器，以便通过 http(s):// 协议提供服务。在浏览器中简单打开index.html文件将不起作用，因为它使用 file:// 协议。

Web服务器的常见选择是nginx，Caddy，Apache，Express，但你应该可以使用任何你想要的web服务器。

Web服务器不需要特殊的设置（除非在quasar.config.js中以“history”模式用Vue Router构建）。主要要求是能够为目录中静态文件提供服务，因此请参阅Web服务器的文档以了解如何设置静态文件服务。

nginx的示例配置可能如下所示：

server {
    listen 80 http2;
    server_name quasar.myapp.com;

    root /home/user/quasar.myapp.com/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/quasar.myapp.com-error.log error;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

重要的托管配置

不允许浏览器缓存index.html文件是很重要的。因为对于从缓存加载index.html的浏览器来说，对该文件或应用程序的更新可能会漏洞百出。

这就是为什么必须始终确保通过你的托管服务将"Cache-Control": "no-cache"添加到index.html文件的头部。

一个展示如何做到这点的Google Firebase例子，您可以将以下内容添加到firebase.json文件配置：

{
  "hosting": {
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ]
  }
}

使用Vercel部署

用Vercel部署你的Quasar应用程序真的很简单。您只需下载vercel-cli并通过运行以下命令登录：

$ vercel login

然后继续使用在“常规部署”章节描述的步骤构建Quasar应用程序。

构建完成后，将目录切换到您的部署根目录（例如：/dist/spa）

# 来自/dist/spa (或你的distDir)
$ vercel

Vercel CLI现在应该显示关于您的部署信息，例如URL。就这样。你完成了。

Vercel配置技巧

您应该考虑向项目添加一些其他配置。

由于Vercel期望定义_build_脚本，因此您可以在package.json中添加以下脚本：

  {
    ..
    "scripts": {
      ...
      "build": "quasar build",
      "deploy": "vercel"
    }
  }

由于Vercel预期构建结果位于/public目录中，而_Quasar_默认将其存储在/dist/spa中，考虑相应地更新quasar.config.js：

module.exports = function (ctx) {
  return {
    ...
    build: {
      ...
      distDir: ctx.mode.spa ? 'public' : null,
    }

为了在已部署的应用程序中支持SPA路由，请考虑在根文件夹中添加vercel.json文件：

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

使用Heroku进行部署

不幸的是，Heroku不支持开箱即用的静态网站。但别担心，我们只需要在我们的项目中添加一个HTTP服务器，Heroku就可以为我们的Quasar应用程序提供服务。

在这个例子中，我们将使用Express创建Heroku可以使用的最小服务器。

首先，我们需要为我们的项目安装所需的依赖项：

$ yarn add express serve-static connect-history-api-fallback

现在我们已经安装了所需的依赖关系，我们可以添加我们的服务器。在项目的根目录下创建一个名为server.js的文件。

const
  express = require('express'),
  serveStatic = require('serve-static'),
  history = require('connect-history-api-fallback'),
  port = process.env.PORT || 5000

const app = express()

app.use(history())
app.use(serveStatic(__dirname + '/dist/spa'))
app.listen(port)

Heroku假设一组npm脚本可用，所以我们必须修改package.json并在脚本部分添加以下内容：

"build": "quasar build",
"start": "node server.js",
"heroku-postbuild": "yarn && yarn build"

现在是时候在Heroku上创建一个应用程序了, 通过运行：

$ heroku create

并使用以下命令部署到Heroku：

$ git init
$ heroku git:remote -a <heroku app name>

$ git add .
$ git commit -am "make it better"
$ git push heroku master

For existing Git repositories, simply add the heroku remote:

$ heroku git:remote -a <heroku app name>

使用Surge进行部署

Surge是托管和部署静态网站的常用工具。

如果您想用Surge部署应用程序，首先需要安装Surge CLI工具：

$ npm install -g surge

接下来，我们将使用Quasar CLI构建我们的应用程序：

$ quasar build

现在我们可以调用Surge来部署您的应用程序：

$ surge dist/spa

您的应用程序应该使用Surge成功部署。您应该能够将本指南适用于任何其他静态站点部署工具。

在GitHub页面上部署

要将Quasar应用程序部署到GitHub页面，第一步是在GitHub上创建一个名为<username> .github.io的特殊存储库。将此存储库克隆到本地计算机。

接下来，您需要构建您的Quasar应用程序，如“常规部署章节”中所述。这将创建/dist/spa目录。将此文件夹的内容复制到您的克隆存储库。

最后一步是在您的存储库中添加一个提交并推送到GitHub。在很短的时间之后，您应该可以通过https://<username>.github.io/访问您的Quasar应用程序。

将自定义域添加到GitHub页面

请参阅GitHub页面指南以获得关于如何设置自定义域的深入说明。

使用push-dir自动部署到GitHub页面

手动将所有文件复制到GitHub Pages存储库可能是一项繁琐的任务。使用push-dir软件包可以自动执行此步骤。

首先，安装软件包：

$ yarn add --dev push-dir

然后在package.json中添加deploy脚本命令：

"scripts": {
  "deploy": "push-dir --dir=dist/spa --remote=gh-pages --branch=master"
}

将您的GitHub Pages资源库添加为名为gh-pages的远程文件：

$ git remote add gh-pages git@github.com:<username>/<username>.github.io.git

现在您可以使用以下方式构建和部署应用程序：

$ quasar build
$ yarn deploy

这会将您的构建目录的内容推送到您的Github Pages存储库上的主分支。