Как разработать AMP с помощью amp-list в локальной среде?

Question

Я понял, что amp-list должен использовать CORS и https. Итак, как я могу создать демо в локальной среде?
Я создал 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 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

Это очень легко настроить на локальном компьютере, просто выполните следующие шаги:

1) Сделать PHP глобальным доступом через переменную среды установки

2) Перейдите в каталог ROOT вашего проекта и откройте Терминал

3) Обслуживать PHP-сервер на терминале.

php -S localhost:3000

4) Измените URL-адрес списка усилителей, как показано ниже (удалите локальный URL-адрес из src и замените на «/»)

<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

Надеюсь, это решит вашу проблему.

Спасибо Ziyed

Answer 2

Если вы работаете с чем-то вроде WAMP, вы можете настроить его на использование https. Я использовал это руководство пару раз, чтобы выполнить его.

Мне также недавно сообщили о Local от Маховика . Это в основном для сред Wordpress, но вы можете раскрутить SSL-сертификат одним нажатием кнопки. Если вы используете Wordpress, это мечта для локальной разработки.

Он также работает с не Wordpress сайтами (см. Скриншот с их сайта ниже). Это немного более обременительно с точки зрения того, что вы должны сначала разрешить установку Wordpress, а затем удалить Wordpress.