В настоящее время существует множество решений, чтобы свободно принимали небольшое приложение, такое как Firebase, NetLifly, S3, Heroku, страницы GitHub. Они дают нам силу массового производства за несколько секунд путем автоматического расширения масштабирования (с некоторыми стоимостью курса …).
Я играл с умным облаком для боковых проектов, и я хотел поделиться с вами, как развернуть приложение Vuejs с повторным перенаправлением HTTPS. Перед продолжением, я вообще не спонсируется умным облаком. Я просто рад поделиться этим.
Давайте начнем 1960 фанкную Groovy Music:
Генерировать зверя с Vue-Cli 🐥
Если у вас уже есть приложение, перейдите на следующий раздел. Чтобы генерировать приложение VUE, убедитесь, что установлен Vue-CLI:
$ npm install -g @vue/cli ## To check if it is installed $ vue --version
Приложение Vue, созданное в этом примере, является шаблоном по умолчанию от Vue-CLI:
$ vue create super-vue-app
Следуйте установке, Open Project Workplace, запустите приложение и перейдите в свой любимый браузер URL http://localhost: 8080
$ cd super-vue-app $ npm run serve
Предвидеть этап производства, давайте построим приложение с:
$ npm run build
Когда приложение VUE построено с Vue-Cli-Service Build Команда, это создает добычу производства в Dist папка, которая будет использоваться позже.
Setup Express ⚡️.
Цель состоит в том, чтобы обслуживать заявку из Express и должным образом доступа к соответствующему маршруту. Однострановое приложение основано на одном файле index.html И он использует HTML5 History API для управления навигацией. Однако по умолчанию сервер обходит index.html и будет служить по запросу местоположения. Промежуточное программное обеспечение называется Connect-History-API-Foxback решает проблему путем перенаправления всех запросов на index.html.
Зависимость установки сервера:
$ npm install express connect-history-api-fallback dotenv --save
После создания файла Server.js Следующий код должен быть добавлен для запуска Express Server:
require("dotenv").config();
var express = require("express");
var app = express();
var history = require("connect-history-api-fallback");
// Synchronize vuejs history mode
app.use(
history({
// Enable logging
verbose: true
})
);
// Serve all the files in the '/dist' directory
app.use(express.static("dist"));
app.listen(process.env.PORT, "0.0.0.0", function() {
console.log("My super vue app is listening on port 8080");
});
Чтобы запустить сервер, добавьте новый Начать Команда к Package.json:
{
scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "node server.js"
}
}
Чтобы проверить, работает ли сервер локально, давайте запустим команду, и регистратор должен распечатать Мое приложение Super Vue слушает порта 8080 Отказ
$ npm run start
Посетите страницу http://localhost: 8080/О Сделайте обновление, и он должен работать!
Теперь пришло время настроить автоматическое перенаправление HTTPS, есть 2 возможных способа, предоставляемых умным облаком Документация :
- Используйте промежуточное программное обеспечение под названием выражение
- Создайте нашу промежуточное программное обеспечение и прочитайте
X-Foreded-Protoзаголовок
Для этого примера использовался второй вариант. Следующий код был добавлен незадолго до app.listen Отказ
// Force HTTPS redirection
app.use(function(req, res, next) {
if (
req.secure ||
req.headers["x-forwarded-proto"] === "https"
) {
return next();
} else {
return res.redirect("https://" + req.headers.host + req.url);
}
});
Приложение готово быть развернутым. Код доступен на GitHub: https://github.com/steevepay/vue-clever-app
CLI & Развертывание 🚀
Умное облако обеспечивает CLI под названием Умные инструменты ускорить развертывание. Во-первых, установите CLI:
$ npm install -g clever-tools ## Command to check if everything is working $ clever version
Запустив следующую команду, он откроет браузер для выполнения входа/регистрации на Clever Cloud:
$ clever login
Вам будет предоставлено 2 переменных среды Clever_token и Clever_Secret. . Эта переменная может быть добавлена в ваш .bashrc или быть экспортированным в ваш терминал:
$ export CLEVER_TOKEN=... $ export CLEVER_SECRET=...
Умное облако необходимо инициализировать, чтобы получить приложение. Для достижения так, используйте Умные создания Команда для определения приложения.
$ clever create super-vue-app --type node
После запуска команды появляется сообщение успеха: Ваше приложение было успешно создано! , это хорошая новость. Чтобы создать приложение для производства команды NPM запустить сборку необходимо выполнить. Умное облако имеет развертывание Жизненный цикл И крюки для переменной среды могут быть введены в запуск команд в определенное время. В нашем случае Cc_post_build_hook Используется, потому что он выполняется сразу после того, как «Установка NPM» привлечена зависимости. Вот команда:
$ clever env set CC_POST_BUILD_HOOK "npm run build"
Наконец, следующая команда используется для развертывания:
$ clever deploy
Журналы печатаются в терминале, а команды NPM выполняются в порядке: Установить , построить и Начать Действительно Теперь посетите приложение в домене, возвращенном следующей командой:
$ clever domain
Поздравляем, вы только что развернули ваше первое приложение на умных облаках 👏
🎁 Бонус: если вам нужно больше подробностей о статусе развертывания:
$ clever status
🎁 Второй бонус: чтобы остановить приложение:
$ clever stop
🎁 Третий бонус: если что-то пошло не так во время развертывания, вы можете запустить следующую команду для перезапуска. Это может показать более подробную информацию об ошибках:
$ clever restart
Заключение 🎶.
В последнее время мне легко создавать и развертывать приложения, POC или все, что вы хотите построить. Использование инструментов, которые делают развертывание легко, действительно ценно, так как они сохраняют много времени и энергии.
И как всегда, не стесняйтесь обращаться ко мне! 😊
Спасибо за прочтение!
* Funky Groovy Music исчезает … 🎶 *
Оригинал: «https://dev.to/steeve/vuejs-app-on-clevercloud-https-redirection-in-few-minutes-gpf»