Итак, вы создали любой статичный сайт с помощью HTML, CSS, Javascript. Но вы беспокоитесь о развертывании на любом бесплатном сервере. Heroku может решить вашу проблему. Разверните свой статический веб-сайт в Heroku, используя Node. Пример статического сайта с Node приведен здесь
Предпосылки
- Убедитесь, что у вас установлены node.js и npm.
- У вас есть любой веб-сайт, созданный с использованием HTML, CSS, JavaScript. Если у вас нет никаких забот. Вы можете получить его здесь
Шаг 1. Создайте приложение Nodejs
- Перейдите в каталог проекта и создайте папку с именем "static-website-with-node".
- Перейдите в созданный каталог "static-website-with-node" и выполните приведенную ниже команду.
инициализация нпм
3. После этого процесса будет создан новый файл с именем package.json. Теперь пришло время создать сервер для запуска вашего статического веб-сайта. Сервер узлов можно создать с помощью express, который можно установить с помощью приведенной ниже команды.
npm установить экспресс — сохранить
4. Теперь создайте файл с именем server.js и добавьте приведенный ниже код в соответствии со снимком.
5. Отредактируйте файл "package.json". Измените "main:index.js" на "main:server.js"и добавьте "start:"node server.js" под script тег. Ваш package.json должен выглядеть примерно так.
6. Вот и все, вы успешно настроили приложение node. Теперь пришло время подключить ваш статический веб-сайт к этому приложению node.
Шаг 2. Импортируйте свой статический веб-сайт в приложение Node
- Предположим, папка вашего статического веб-сайта называется client-static-website. Просто вставьте эту папку в свое приложение узла. Вы можете найти статический веб-сайт (если у вас нет статического веб-сайта) из здесь. Теперь каталог вашего проекта будет выглядеть так.
2. Убедитесь, что имя папки вашего статического веб-сайта (в данном случае это client-static-website) должно совпадать с именем папки, указанным в файле server.js. Это должно быть что-то вроде
3. Вы интегрировали свой статический веб-сайт с узлом js. Теперь перейдите в каталог проекта и выполните команду
запуск нпм
Он должен открываться по адресу http://localhost:3000/.
Шаг 3. Отправьте свой код на Github
- Теперь пришло время создать репозиторий и отправить код на Github. Если вы не знаете, как отправить свой код на Github, прочитайте эту статью
- Однажды вы отправили свой код на Github, чтобы убедиться, что он находится в основной ветке.
Шаг 4. Настройте учетную запись Heroku
- Создайте свою учетную запись Heroku (если ее нет), используя эту ссылку
- Авторизуйтесь и перейдите на панель управления страница. Создайте новое приложение для ex-static-webiste-with-node
3. После того, как вы создадите новое приложение. Он будет отображаться на странице панели инструментов, как показано выше.
4. Нажмите «ваше приложение» и перейдите на вкладку «Развернуть».
5. Пришло время связать вашу учетную запись Github с учетной записью Heroku. Нажмите на значок Github. Он попросит какой-то процесс подключить вашу учетную запись Github. Как только ваша учетная запись Github соединится с учетной записью Heroku, она будет отмечена как «подключенная», как показано выше.
6. Теперь пришло время развернуть ваш код. Прокрутите ту же страницу вниз и выберите «Развертывание вручную».
7. Нажмите кнопку "Развернуть ветку". Начнется процесс сборки, и развертывание вашего кода на Heroku займет несколько минут. После завершения развертывания будет предоставлен автоматически сгенерированный домен, например https://static-website-with-node.herokuapp.com/».
8. Отлично! Ваше приложение должно быть развернуто на Heroku с помощью node!.
Теперь посетите URL-адрес и наслаждайтесь доступом к нему.
9. Если у вас возникнут какие-либо проблемы во время развертывания, прокомментируйте свою проблему, я помогу вам с этим.
Это все, ребята!
Если у вас нет собственного статического сайта. Не беспокойтесь, просто клонируйте это приложение и начните развертывание с его помощью.
Пожалуйста, дайте мне знать, если вы найдете эту статью полезной для вас. Следуя этой статье, если у вас возникнут проблемы, прокомментируйте свою проблему, я посмотрю на это. Все, что я написал здесь, не ясно или легко понять. Я хотел бы услышать ваши отзывы.
Это моя первая статья на Medium. Я надеюсь, тебе это нравится. Вы можете связаться со мной в LinkedIn по любой другой технической теме. Я хотел бы поделиться своими знаниями.
