Еще в 90-е годы в Интернете почти все сайты были статичными. Но по мере роста количества пользователей Интернета мы хотим отображать богатое содержимое. Затем появляется новая архитектура - [Front - ›Server -› DB], такая как LAMP (Linux, Apache, MySQL, PHP). WordPress - один из самых известных. Но время летит, статичные сайты вернулись! Почему?

Почему статические сайты

1. Скорость. Несомненно, статические сайты работают очень быстро.

2. Безопасность. Отсутствие посредника означает низкую угрозу внедрения кода. Отсутствие плагинов означает, что вам не нужно беспокоиться о последней версии для защиты вашего динамического сайта.

3. Низкая цена. БЕСПЛАТНЫЕ услуги хостинга, такие как Github-Pages или Netlify, по сравнению с сервером $ xx / месяц только для веб-сайта блога или компании. Твой выбор.

4. Легко перенести. Мой сайт LAMP (не WordPress) подвергся DDoS-атаке, и этот VPS-сервер был остановлен автоматически до того, как я смог войти в систему. Я попросил поставщика разрешить мне войти в систему и сделать резервную копию последних данных из БД, но получил отказ. Они сказали: «У вас есть только два варианта: полностью переустановить сервер и сменить IP-адрес или уйти отсюда». Я переехал. Да, без последней БД. К тому же миграция стоила мне много времени. Но если бы это был статический сайт с лямбдой…

Нет необходимости в Circle-CI, достаточно Netlify

да. Ты прав. Вы можете записать свой веб-сайт в Netlify с одним или даже без netlify.toml.

Но тесты очень важны для меня, я хочу протестировать свой сайт перед их публикацией. Итак, необходим CI-инструмент.

Почему Circle-CI

Я не уверен, что Circle-CI лучший вариант. Но это Docker поддерживается так же, как Gitlab-CI. Так что мне легче понять, как работает Travis-CI. Также возможны частные репозитории CI Github.

Где строить

Есть два способа развернуть ваш сайт.

1. протестируйте в Circle-CI, используйте веб-перехватчик для запуска Netlify, сборки и развертывания Netlify

2. Тест - ›сборка в Circle-CI, отправка собранных файлов в Netlify с помощью netlify-cli.

Из-за функции кеширования в circle-ci тестирование и построение в circle-ci выполняется намного быстрее. Кроме того, если вы можете перейти на другой хостинг с изменением только последнего шага.

Поэтому выбираю способ №2.

Обсуждение дешево, покажи код.

Начнем

Среда

Поскольку я использую gatsbyjs, docz, storybook, next.js для создания своих веб-сайтов. Я хочу скомпилировать их на сервере узлов.

executors:
  node:
    docker:
      - image: circleci/node:8

Кеш

npm с package-lock.json работает быстро.

пряжа с yarn.lock быстрее.

пряжа с yarn.lock и кеш-камнями.

Поскольку package.json меняется нечасто, в этом случае отлично подходит кеш.

Определим несколько вариантов для кеширования.

aliases:
  restore_cache: &restore_cache
    restore_cache:
      name: Restore Npm Package Cache
      keys:
        - yarn-cache-netlify-{{ checksum "yarn.lock" }}
install_node_modules: &install_node_modules
    run:
      name: Install dependencies
      command: yarn
save_cache: &save_cache
    save_cache:
      name: Save NPM package cache
      key: yarn-cache-netlify-{{ checksum "yarn.lock" }}
      paths:
        - ./node_modules

Вакансии

Как я уже упоминал ранее, я хотел бы разделить этапы «тестирование -› сборка - ›развертывание» для обеспечения скорости и гибкости.

тест

test:
  executor: node
  steps:
    - checkout
    # Restore cache at second time
    - <<: *restore_cache
    # Install for first time
    - <<: *install_node_modules
    # Cache the ./node_modules before test.
    - <<: *save_cache
    - run:
        name: Test
        command: yarn test

Как вы уже заметили, мы используем Execter вместо docker: xxx.

строить

build:
  executor: node
  steps:
    - checkout
    - <<: *restore_cache
    - <<: *install_node_modules
    - run:
        name: Build
        command: yarn build
    - persist_to_workspace:
        root: ./
        paths:
          - public

развернуть

Установите netlify-cli и файл deploy.

deploy:
    executor: node
    steps:
      - checkout
      # Attach the pesisted built files.
      - attach_workspace:
          at: ./
      - <<: *restore_cache
      - <<: *install_node_modules
      - run:
          name: Install netlify-cli
          command: sudo npm install -g --silent netlify-cli
      - run:
          name: Deploy to Netlify
          command: netlify deploy --dir=./public -p

Как видите, я могу легко перейти на другой хост, просто заменив эту часть.

Объединяйте рабочие места

Используйте рабочий процесс, чтобы собрать их вместе.

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - test
      - build:
          requires:
            - test
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

Это все о конфигурации yaml, не сложно, правда?

Вы можете найти весь файл config.yaml Circle-CI здесь

Https://github.com/thundermiracle/gatsby-simple-blog/blob/master/deploy/netlify/.circleci/config.yml.

Но настройки еще не закончены.

Мы почти там.

Что осталось?

развертывание netlify - dir =. / public -p

да. Мы не сказали netlify-cli, где развернуть.

Нам нужен NETLIFY_AUTH_TOKEN для таргетинга на нашу учетную запись и NETLIFY_SITE_ID для таргетинга на наш веб-сайт в этой учетной записи.

Netlify.com

Создать NETLIFY_AUTH_TOKEN

В ваших [Настройки пользователя] - ›[Приложения] -› [Персональные токены доступа].

(Https://app.netlify.com/user/applications#personal-access-tokens

)

Щелкните [Новый токен доступа].

Сохраните свой токен где-нибудь, потому что он показывался только один раз, и мы будем использовать его в кружке-ci.

Создать NETLIFY_SITE_ID

Это можно сделать двумя способами.

1. Установите netlify-cli на свой локальный компьютер. Запустите netlify init и следуйте инструкциям.

npm install -g netlify-cli
cd your-project-folder
netlify init

Наконец, cli сгенерирует для вас .netlify / config.json. Вы можете установить этот NETLIFY_SITE_ID в Circle-ci и удалить папку. Или просто оставьте это и пропустите настройку NETLIFY_SITE_ID.

2. В [Сайты] нажмите [Новый сайт из Git] (https://app.netlify.com/start

), Следуй инструкциям.

Затем вы можете найти свой идентификатор здесь: [Настройки сайта] - ›[Информация о сайте] API ID - это ваш NETLIFY_SITE_ID.

Круг-CI

Добавить проект

[Добавить проекты] - ›[Настроить проект] -› [Начать сборку]

PS: Нет необходимости копировать config.yml, мы только что создали его вручную.

Установить вирианты среды

[Настройки проекта] - ›[Переменные среды] -› [Добавить переменную]

Добавьте свои NETLIFY_AUTH_TOKEN и NETLIFY_SITE_ID.

Последний

Отправьте исходный код в Git и на Happy Static Site!