如何在本地环境下使用amp-list开发AMP？

Question

我意识到 amp-list 必须使用 CORS 和 https。那么如何在本地环境中搭建demo呢？
我从头开始构建了一个 AMP 页面并创建了一个简单的 JSON 文件。

{
  "items": [
    {
      "title": "AMP YouTube Channel",
      "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"
    },
    {
      "title": "AMP project.org",
      "url": "https://www.ampproject.org/"
    },
    {
      "title": "AMP By Example",
      "url": "https://ampbyexample.com/"
    },
    {
      "title": "AMP Start",
      "url": "https://ampstart.com/"
    }
  ]
}

然后将 src 添加到 amp-list

<amp-list width="auto"
          height="100"
          layout="fixed-height"
          src="http://localhost:9909/data1.json/">
    <template type="amp-mustache">
        <div class="url-entry">
            <a href="{{url}}">{{title}}</a>
        </div>
    </template>
</amp-list>

我得到了

GET http://localhost:9909/data1.json/?__amp_source_origin=http%3A%2F%2Flocalhost%3A9909 404 (Not Found)

如果我将 src 更改为 "data1.json"，我得到

"source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

从错误中可以看出，它可以从 https 或 localhost 提供。
但是我怎样才能做到这一点？

Answer 1

如果您正在使用诸如 WAMP 之类的东西，您可以将其设置为使用 https。我已经使用 this guide 几次来完成它。

我最近也被告知 Local by Flywheel。它主要用于 Wordpress 环境，但您可以通过单击按钮启动 SSL 证书。如果您使用 Wordpress，那么本地开发工作就是一个梦想。

它也适用于非 Wordpress 网站（见下面他们网站的截图）。只是比较繁琐，必须先让它安装Wordpress，然后再删除Wordpress。

Answer 2

在本地设置非常简单，只需按照以下步骤操作即可：

1) 通过设置环境变量

使PHP成为全局访问

2) 转到项目的 ROOT 目录并打开终端

3) 在终端上为 PHP 服务器提供服务。

php -S localhost:3000

4) 像下面这样更改 amp-list url（从 src 中删除本地主机 url 并替换为“/”）

<amp-list width="auto"
          height="100"
          layout="fixed-height"
          src="/data1.json">
    <template type="amp-mustache">
        <div class="url-entry">
            <a href="{{url}}">{{title}}</a>
        </div>
    </template>
</amp-list>

5) 打开您的浏览器并按以下方式浏览：http://localhost:3000

希望能解决您的问题。

谢谢齐耶德

如何在本地环境下使用amp-list开发AMP？

How to develop AMP by using amp-list in local environment?

html

amp-html

progressive-web-apps

accelerated-mobile-page