Astro-StoryBlok预览网站，具有Netlify的分支部署功能
#javascript #astro #netlify #storyblok

描述：本文将告诉您如何设置Astoro-StoryBlok项目，以便您的预览网站部署到NetLify Branch-Deploy，同时将主要生产站点保持在SSG模式下。奖励：GitHub动作以将预览分支与生产保持同步。

介绍

如果您将StoryBlok用作静态网站（例如博客）的无头CM，则可能需要设置一个工作流程，编辑器可以在其中单击Storyblok中的“保存”，然后查看其更改。这意味着设置视觉编辑器以在Storyblok中工作，正如我在previous article中所解释的那样，要求您的Astro项目处于SSR模式。

。

如果您想利用Astro的静态网站模式（SSG）为您的生产站点，但是您仍然希望预览在StoryBlok中工作？如果预览要求项目处于SSR模式，我们该怎么办？

如果您将Netlify用于部署，则有一种方法可以创建一个Astro项目，该项目以 ssg模式为生产环境和 SSR模式用于预览分支，然后使用NetLify Branch-Deploy功能将每个版本部署到 不同的NetLify URL。

您还可以设置一个GitHub操作，以使预览分支始终保持最新状态，并通过部署到主（生产）分支的任何更改！

！

这是如何设置此设置的演练。

1.在Netlify中创建一个分支机构，因此您可以在单击Storyblok中单击“保存”按钮时拥有一个特殊的分支

资源：Netlify Branches and deploys

创建预览分支

在您的项目中，创建一个名为previews的分支。

进入您的NetLify仪表板部署 - >部署设置 - >分支和部署上下文。

  • 单击编辑设置。
  • 选择'让我添加单个分支'
  • 在附加分支输入中，添加您创建的分支称为previews。

现在，您有了一个分支，您将用于预览环境。您将在此预览分支上设置您的Astro项目以在SSR模式下构建。

顺便说一句，在Netlify术语中，您创建的分支对应于非主要生产分支的部署，称为branch-deploy。有不同的NetLify deploy-contexts，branch-deploy是其中之一（除了production和deploy-previews。

创建环境变量

您需要确保拥有一个环境变量，该变量告诉Netlify您创建的该分支是预览环境。稍后，当您进入Astro项目时，您将根据这些变量进行设置以不同的构建。

在Netlify中，转到部署 - >部署设置 - >环境变量。

  • 创建一个称为VITE_ENVIRONMENT的环境变量。
  • 在分支部署中，使用值preview创建变量。 （当然，如果您愿意，您可以以不同的命名。）

现在可以根据VITE_ENVIRONMENT变量告知NetLify，以在SSG模式下构建分支以生产或以SSR模式构建预览分支。

2.在Storyblok视觉编辑器设置中，将您的NetLify预览分支URL添加到预览URL

登录到您的Storyblok space。在左侧导航菜单中，找到设置。从那里导航到 Visual Editor 。

这是您告诉StoryBlok将视觉编辑器连接到您创建的特殊分支的previews branch-deploy的地方。

在预览URL 部分中，有输入可以添加多个预览域。添加previews在索要名称和该部署的预览分支的NetLify URL的位置添加previews。

您可以查看Netlify URL，以了解预览站点正在构建的哪个部署 - 偏见（即哪个分支机构）。由于您在Netlify中调用了branch-deploy previews，因此您会看到像https://previews--NETLIFY_URL之类的东西。如果您正在查看netlify deploy-preview，它看起来像https://deploy-preview-32--NETLIFY_URL（其中的数字是DEMPLAY-PREVIEW的编号）。

3.设置您的astro.config.mjs文件，以便它使用条件逻辑在static模式下构建您的网站，如果它在生产中，则在预览环境中server模式

现在，您将进入Astro项目以添加一些必要的配置。这是您在Netlify中设置的环境变量将要发挥作用的地方。

设置.env

在Netlify中，您创建了环境变量VITE_ENVIRONMENT， branch部署被赋予了preview值。

在您的项目中，您需要创建一个.env文件，以向您的项目提供该变量值，以便它可以在Dev模式下工作。在.env文件中，添加VITE_ENVIRONMENT="preview"。

将配置添加到astro.config.mjs

在defineConfig中给出的配置对象中有四个属性，需要将其写成三元条件。它们是output，accessToken（在Storyblok设置对象中）和bridge（也在Storyblok设置中）和adapter。

对于output，您将提供一个取决于部署字母是否为preview的值。这是外观：

output:  import.meta.env.VITE_ENVIRONMENT  ===  "preview"  ?  "server"  :  "static",

这将告诉项目如果将其部署到preview分支，则以server模式（即SSR）构建。如果不是这样，它将以static模式（SSG）构建。

配置对象中的integrations数组包含带有设置对象的storyblok方法。 

storyblok({
    accessToken:
        import.meta.env.VITE_ENVIRONMENT  ===  "preview"
        ?  "HodE5R9wdAKERDFNiq7LGStl" : "UUtz6RYjUvOC0tMf1MteHQtz",
    bridge:  import.meta.env.VITE_ENVIRONMENT  ===  "preview"  ? true :  false,
    apiOptions: {
        region:  "us",
    },
    components: {
        page:  "storyblok/Page",
        feature:  "storyblok/Feature",
        grid:  "storyblok/Grid",            
        ...
        },
    }),

这告诉StoryBlok集成如果该网站在SSR中部署，则使用 Preview 令牌，如果该网站部署在SSG中，则 public 令牌。 （这些Storyblok访问令牌是在您的故事Blok空间中创建的 settings > 访问令牌。）

在我之前提到的article中，我展示了如何设置视觉编辑器的地方，我讨论了如何添加NetLify适配器。 SSR Deploy-context需要NetLify适配器。如果您需要设置SSR，则可以阅读该文章以获取更多信息。 您需要设置NetLify适配器。

您可以告诉您的项目仅在SSR模式下使用NetLify适配器：

adapter: import.meta.env.VITE_ENVIRONMENT === 'preview' ? netlify() : undefined,

这是astro.config.mjs文件外观的示例。根据您的项目集成，可能存在差异，但这是一个一般示例：

import { defineConfig } from  "astro/config";
import  storyblok  from  "@storyblok/astro";
import  netlify  from  "@astrojs/netlify/functions";
import  tailwind  from  "@astrojs/tailwind";

export  default  defineConfig({
    output:  import.meta.env.VITE_ENVIRONMENT  ===  "preview"  ?  "server"  :  "static",
    adapter: import.meta.env.VITE_ENVIRONMENT === 'preview' ? netlify() : undefined,
    integrations: [
        tailwind(),
        storyblok({
            accessToken:
                import.meta.env.VITE_ENVIRONMENT  ===  "preview" ?  "HodE5R9wdAKERDFNiq7LGStl" : "UUtz6RYjUvOC0tMf1MteHQtz",
                bridge:  import.meta.env.VITE_ENVIRONMENT  ===  "preview" ? true :  false,
                apiOptions: {
                region:  "us",
                },
                components: {
                    page:  "storyblok/Page",
                    feature:  "storyblok/Feature",
                    grid:  "storyblok/Grid",
                },
            }),
        ],
});

4.使用SSG模式下的公共令牌从StoryBlok获取页面数据，这是SSR模式下的预览令牌。

从Storyblok中汲取内容数据的Astro页面可以吸引draft内容或published内容。您需要告诉您的项目在preview exploy-contept中使用draft内容构建页面，而在生产中进行published内容。

对于Astro 页面中的每个页面文件夹，您将在获取StoryBlok API数据时执行此类操作：

const { data } =  await  sbApi.get("cdn/stories/home", {
    version:
        import.meta.env.VITE_ENVIRONMENT  ===  "preview"  ?  "draft"  : "published",
});

这将根据Netlify中的环境变量值有条件地使用draft或published内容构建项目。

这是Astro项目中主页的一个示例：

---

import { useStoryblokApi } from  "@storyblok/astro";
import  StoryblokComponent  from  "@storyblok/astro/StoryblokComponent.astro";
import  Layout  from  "../layouts/Layout.astro";

const  sbApi  =  useStoryblokApi();
const { data } =  await  sbApi.get("cdn/stories/home", {
    version:
        import.meta.env.VITE_ENVIRONMENT  ===  "preview"  ?  "draft"  : "published",
});
const  story  =  data.story;
---

<Layout>
<StoryblokComponent  blok={story.content} />
</Layout>

用于创建动态路由，您可以使用条件设置告诉您的项目仅在SSR模式下使用Astro的getStaticPaths方法。查看此Discord comment的示例 nikitos 。

6.创建一个github操作，该操作也会自动合并对Main的任何更改，也可以与预览分支

您可能要做的最后一件事是设置一个连续的集成，以便您的预览分支与主分支保持同步。这样，当有生产部署时，您就不必手动更新预览分支 - 它将自动发生。

您可以使用github动作来执行此操作。这是您需要做的。

  • 在您的项目中创建一个.github文件夹。在该文件夹中，添加一个workflows文件夹。
  • 在workflows文件夹中创建一个名为auto-merge.yml的文件

github folder structure with workflows and auto-merge.yaml file

  • 将以下代码添加到该文件： 
name: Merge main to previews
on:
    pull_request:
        branches: [main]
        types: [closed]
jobs:
    merge-main-to-previews:
    if: github.event.pull_request.merged == true
    timeout-minutes: 2
    runs-on: ubuntu-latest
    steps:
        - uses: actions/checkout@v3
        - name: Set Git config
        run: |
            git config --local user.email "actions@github.com"
            git config --local user.name "Github Actions"
        - name: Merge main to previews
        run: |
            git fetch --unshallow
            git checkout previews
            git pull
            git merge --no-ff main -m "Auto-merge main to previews"
            git push

现在，每当将拉力请求合并到主（生产）分支时，它也会将这些更改合并到预览分支中！