Heroku — универсальная платформа для развертывания и размещения веб-сайтов. Итак, давайте узнаем, как легко запустить наш сайт с помощью heroku.
Надеюсь, у вас уже есть запущенный проект vue до того, как вы прочтете этот пост. Если нет, пожалуйста, нажмите здесь и настройте и запустите приложение vue.js, прежде чем читать сообщение ниже.
1. Прежде чем размещать свой сайт, вам сначала нужно создать приложение vuejs. Этого можно добиться с помощью простой команды.
Сначала перейдите в каталог вашего проекта на терминале, затем введите одну из следующих команд в зависимости от вашего менеджера пакетов.
НПМ
npm run build
Пряжа
yarn build
После завершения этого процесса вы увидите новую папку с именем dist в каталоге вашего проекта. Эта папка dist будет содержать файлы, которые нам нужно загрузить на сервер. Папка Dist будет содержать следующие файлы.
2. Heroku требует, чтобы вы установили некоторую серверную службу, прежде чем вы сможете разместить свой сайт в heroku, поэтому давайте сначала настроим приложение для работы на сервере heroku.
Теперь давайте установим экспресс-сервер и добавим файл server.js для обслуживания приложения vue.js.
npm install express serve-static
Теперь добавьте файл server.js в каталог вашего проекта, он должен выглядеть так, как показано ниже.
Добавьте следующий скрипт в файл server.js, чтобы обслуживать ваш сайт на экспресс-статическом сервере.
const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')
const app = express()
//we are configuring dist to serve site files
app.use('/', serveStatic(path.join(__dirname, '/dist')))
// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) {
res.sendFile(path.join(__dirname, '/dist/index.html'))
})
const port = process.env.PORT || 8080
app.listen(port)
console.log(`site is listening on port: ${port}`)
Теперь, чтобы протестировать server.js, выполните следующую команду локально.
node server.js
Примечание. Убедитесь, что порт 8080 свободен.
3. Вы можете развернуть сайт непосредственно на героку или настроить непрерывную доставку с помощью git и героку, чтобы каждый раз, когда вы отправляете свой код на github, он автоматически развертывался на героку. Здесь я покажу вам оба способа, а вы сами решите, какой из них использовать.
a) Непосредственно разверните свой сайт на героку.
Heroku позволяет нам легко развертывать и размещать наше приложение Vue.js. Сначала вам нужно создать учетную запись на героку, если вы еще не создали учетную запись, нажмите здесь. После этого установите инструмент командной строки Heroku по инструкции здесь. Затем давайте создадим наше приложение Heroku:
heroku create //create app with random app name //OR heroku create <YOUR-PROJECT-NAME-HERE> //create app with specific name
Когда закончите, вы получите ссылку на свой сайт.
Теперь вы можете напрямую отправить свой сайт на героку. Выполните следующие действия:
я. Инициализируем git в нашем проекте
git init
II. Добавьте наш удаленный репозиторий Heroku.
heroku git:remote -a <YOUR-PROJECT-NAME-HERE>
III. Нам нужно добавить все файлы.
git add .
IV. Давайте зафиксируем наш код.
git commit -m "first commit"
v. Наконец, нам нужно развернуть наш код на heroku.
git push heroku master
Это отправит наш зафиксированный код в удаленный репозиторий Heroku.
Вуаля, теперь ваш сайт работает. Просто перейдите по указанной ранее ссылке при создании приложения heroku или просто введите heroku open.
b) Настроить интеграцию непрерывной доставки с heroku и git
Во-первых, вам нужно создать репозиторий на github и отправить свой код на github. Вы можете выполнить следующие шаги, чтобы отправить свой код на github.
git init git commit -m "first commit" git remote add origin https://github.com/<yourusername>/<yourprojectname>.git //this link will be provided while you create github repository git push -u origin master
После этого шага у вас будет код на github.
Теперь вам нужно создать приложение heroku. Пожалуйста, посмотрите в разделе 3. а) выше, как создать приложение heroku с помощью CLI.
Теперь мы рассмотрим, как использовать графический интерфейс heroku для создания приложения и настройки автоматической доставки. Здесь,
Сначала зайдите на сайт heroku, введите свои учетные данные на экране входа в систему, и вы попадете на панель инструментов. В правом верхнем углу вы можете увидеть опцию создания нового приложения.
После создания приложения вы попадете в раздел развертывания.
В методе развертывания выберите метод подключения к github, затем введите имя репозитория github и нажмите кнопку поиска.
Теперь он отобразит ваш репозиторий github и нажмите «Подключиться».
Примечание. Вам необходимо авторизовать учетную запись github с помощью heroku.
После подключения он попросит выбрать ветку для установки непрерывной доставки. Так как мы поместили наш код в ветку master ранее, выберите опцию master и нажмите Enable Automatic Deploys.
Вот и все, вы подключили heroku к своему репозиторию для непрерывной доставки. Теперь при следующем нажатии любые изменения, которые вы сделаете и зафиксируете в ветке master, код будет автоматически перенесен в heroku.
В первый раз он не развертывается, потому что не было нового нажатия, но это произойдет после следующего нажатия на основную ветку.
На данный момент выберите параметр развернуть ветку при ручном развертывании, чтобы развернуть наш код.
Затем вы можете проверить свой проект на странице https://‹YOUR-PROJECT-NAME-HERE›.herokuapp.com.
Или перейдите в раздел настроек в панели инструментов, и там будет раздел домена, где вы можете найти ссылку на свой домен.
Я надеюсь, что это руководство помогло вам развернуть свой сайт с помощью heroku.
Пожалуйста, добавьте комментарий, если у вас есть какие-либо проблемы или вам нужна помощь в вышеуказанном случае.
