Размещение вашего приложения NextJS на Vercel.

🎉 Мы приближаемся к концу этого руководства. Я решил использовать другой подход к последним урокам, которые я планирую написать.

Нажмите здесь, чтобы пропустить введение и сразу перейти к уроку.

Эта серия выросла гораздо больше, чем я планировал, поэтому я хочу завершить ее чисто. Под этим я подразумеваю, что этим уроком я хотел бы завершить основную часть проекта.

Но это ни в коем случае не означает, что это последний урок, просто к концу этой страницы у вас будет свой блог, размещенный для всех желающих.

Я собираюсь включить дополнительные уроки после этого, которые включают в себя…

• Больше стилизации

  • Если вы помните, я оставил оформление главной страницы на ваше усмотрение. Я собираюсь вернуться к этому вопросу и добавить свои собственные, чтобы вы могли увидеть, как я оформляю страницы.

• Как разместить Sanity Studio на Vercel

  • В этой статье я покажу вам, как разместить Sanity Studio на сайте, чтобы вы могли делать новые посты. Единственный минус — у нее будет уникальный url, не привязанный к вашему сайту. Мы можем изменить это, и я покажу вам, как это сделать в дополнительных уроках.

• Что-нибудь еще, о чем я думаю?

  • Это интересный проект для меня, и если я придумаю что-нибудь, что я хотел бы включить в него в будущем, я напишу об этом пост и добавлю его в эту серию Sanity Blog.

• Предложения!

  • Если у вас есть что-то, чего бы вы хотели достичь с помощью этого блога, но вам нужна помощь, дайте мне знать. Если тема будет достаточно обширной для статьи, я создам ее, объяснив свой процесс внедрения этой функции.

Теперь, после всех этих слов, давайте приступим к делу.

Отправка на GitHub

Перед тем, как приступить к работе, убедитесь, что у вас есть .env в файле .gitignore.

Если вы дошли до этого момента, я буду считать, что вы имеете представление о GitHub.

Если вы еще не создали репозиторий на GitHub для этого проекта, создайте его и выложите свой код.

Хостинг на Vercel

Когда ваш проект будет размещен на GitHub, нам понадобится место для его размещения. К счастью, Vercel создан для NextJS, так что это довольно просто.

Перейдите на сайт Vercel.com и создайте учетную запись, если у вас ее еще нет. Я просто зарегистрировался через GitHub, чтобы упростить работу.

После создания учетной записи вы попадете на панель инструментов Vercel.

В правом верхнем углу вы должны увидеть кнопку New Project. Нажмите на эту кнопку, чтобы перейти на страницу импорта.

Если вы использовали GitHub в качестве логина, это произойдет автоматически, но если вы этого не сделали, вы можете подключиться к GitHub отсюда с помощью опции Add GitHub Account.

После подключения к учетной записи GitHub вы должны увидеть Import Git Repository со списком последних репозиториев. Ваш проект должен быть в этом списке, но если его там нет, вы можете найти его с помощью строки поиска. Нажмите Import рядом с вашим проектом.

Теперь вы должны увидеть окно с надписью Configure Project.

Каждый из этих разделов важен.

1. Это имя вашего проекта на GitHub.

   • Я указываю его только для того, чтобы вы могли дважды проверить, что импортируете правильный проект.

2. Нажмите на это выпадающее меню, чтобы добавить переменные среды.

   • Это строки кода внутри вашего файла .env, который мы создали в самом начале.
   • Для каждой строки в вашем файле скопируйте name переменной и вставьте ее в NAME (3).
   • Затем скопируйте значение переменной и вставьте его во вход VALUE (4).

3. После ввода имени и значения переменной нажмите Add.

Теперь вы должны ввести 5 переменных из вашего файла .env, и вы можете увидеть их ниже.

После ввода всех 5 переменных нажмите кнопку Deploy, и vercel развернет ваш проект на пользовательский url.

Если развертывание прошло успешно, вы должны увидеть конфетти и несколько различных урлов, ведущих на ваш сайт.

🥳 Если все сработало, то теперь вы должны иметь возможность использовать урлы на странице вашего проекта для перехода на сайт вашего блога!

Поздравляем!!!

Хостинг Sanity Studio

У вас есть блог в интернете для всех желающих, это очень круто. Но как насчет нашей приборной панели Sanity? В нынешнем состоянии она не очень удобна для использования. Давайте сделаем хостинг с помощью собственного сервиса Sanity!

Вернитесь в командную строку вашего проекта и зайдите в папку studio, как вы это делали, чтобы запустить Sanity Dashboard.

Когда вы окажетесь в этой папке, запустите…

sanity deploy

Он попросит вас ввести название проекта, оно будет в вашем url, поэтому вы можете выбрать любое другое. Лично я просто использую название своего проекта, поэтому я выбрал example-blog.

После выбора имени хоста вашей студии потребуется немного времени, чтобы завершить процесс, но после этого вы должны увидеть следующее.

Перейдите по адресу, который он выведет, и тада! Ваша приборная панель теперь размещена на сайте, и вы можете создавать новые сообщения!

Только люди, которым вы дали доступ к вашему проекту Sanity, могут получить доступ к этой панели.

Вы можете назначить права доступа на странице вашего проекта Sanity онлайн.

Таким образом, нам не придется запускать sanity start для редактирования или создания новых сообщений!

Вы можете добавить на свою страницу элемент кнопки, который ведет на этот url, но без авторизации все смогут перейти на него. Даже если у них нет доступа к вашей приборной панели, все равно немного странно, что люди могут зайти на нее, поэтому я просто сохраняю этот адрес, чтобы зайти на него, когда мне это понадобится.

Возникают проблемы

Я упомянул кое-что в самом начале этой серии.

Есть несколько проблем, которые возникнут при попытке использовать v3 Sanity.

• В настоящее время не существует способа (о котором я знаю) развернуть ваш сайт Vercel при создании нового поста, вам придется делать это вручную.

• Есть только несколько плагинов, которые в настоящее время работают с v3, поэтому возможности ограничены.

Итак… первый пункт означает, что когда вы вносите правки в посты или добавляете новый пост, вам придется вручную развернуть весь ваш сайт на Vercel. Это не слишком сложно сделать, но это раздражает, поэтому я очень надеюсь, что они скоро выпустят v3 плагина Sanity Vercel.

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

На приборной панели вашего проекта в Vercel, которая показывает все ваши урлы, вы должны увидеть кнопку Deployments в верхней части. Нажмите ее.

Теперь вы находитесь на странице Deployments, где вы должны увидеть одну запись о том, когда вы впервые развернули свой проект с Github. В правой части этого развертывания вы должны увидеть 3 маленькие точки, нажмите на них, а затем нажмите Redeploy из выпадающего списка.

Теперь Vercel запустит переразвертывание, и примерно через 1 минуту ваш сайт будет снова размещен на хостинге с изменениями, которые вы внесли в Sanity Dashboard!

По поводу второго пункта, описывающего поддержку плагинов для v3. На Github ведется очень полезное обсуждение того, какие плагины доступны для v3 в настоящее время и какие плагины запрашиваются.

Vercel Deploy находится в списке запрашиваемых, но никаких обновлений не было, так что мы все еще ждем, к сожалению.

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

Заключительные заметки

После долгих задержек с выпуском этой серии, основной проект наконец-то завершен. Теперь у вас есть свой собственный блог, размещенный в Интернете с панелью управления CMS!

Как я уже упоминал в начале, есть еще много интересного, но это все дополнительные функции, которые не нужны.

Я благодарен всем, кто следил за мной, это моя первая попытка создать серию постов о проекте, а не по одному посту на тему, поэтому я все еще учусь передавать так много информации.

Если у вас возникли вопросы, трудности, вообще что-либо, не стесняйтесь, пишите мне в Twitter, и я отвечу вам, как только смогу.

Спасибо!!!♥