Git Product home page Git Product logo

go-chi-vue-yandex-cloud-template's Introduction

Бессерверное Vue.js petite приложение в Яндекс облаке за пять минут на Go

Petite Vue.js это супер-маленький (6кб) веб-фреймворк с поддержкой всего, что нужно. Очень удобно разместить его в Функции, чтобы например, редактировать конфиги или ещё. Чего. В итоге у вас будет и апи и веб интерфейс в одной функции.

И все это за пять минут разворачивается в облаке.

Для пользователей Виндоус рекомендую для заливки в облако использовать этот скрипт. В одно касание задеплоит функцию в облако. Работай в любимом IDE и не морочься с архивами и веб интерфейсом.

Что здесь?

Через пять минут вы получите готовый сервер вида https://<много_букв>.apigw.yandexcloud.net/, который хостит веб сайт из директории web. А в файле index.html уже настроена версия Petite Vue.js.

Вы можете определить любые маршруты для своего апи, они будет олично вызываться.

Установка

Перед вами простой шаблон, который позволит запустить Vue.js страничку в облаке. Делается за минуту:

  • Загрузите go.mod и main.go и папку web в вашу функцию(например, архивом)
  • Поставьте точка входа - main.Router точка входа
  • Поставьте галочку публичная функция галочка

Потом перейдите на https://functions.yandexcloud.net/d4e3...(написан там где галочку ставили). Вы победили!

Стоп! Это ещё не все

Чтобы у нас работало, что-то кроме одного маршрута, мы добавим Api Gateway. Там все очень просто.

Это делается на тот, случай если ты решишь, что тебе нужен ещё например такой адрес /info

router.Get(/info, infoHandler)
  1. Запомнить идентификатор функции. Или в адресе https://functions.yandexcloud.net/<идентификатор>, или в списке всех функций запомнить функцию

  2. Перейдем в сервис Api Gateway в яндекс облаке и создадим новый гейт создать шлюз

  3. Запишем такую конфигурацию в окне создания шлюза, и поменяем строчку function_id на полученный в первом пунтке идентификатор

    openapi: 3.0.0
    info:
      title: Sample API
      version: 1.0.0
    paths:
      /{url+}:
        x-yc-apigateway-any-method:
          parameters:
          - explode: false
            in: path
            name: url
            required: false
            style: simple
          x-yc-apigateway-integration:
            function_id: твой_идентификатор
            tag: $latest
            type: cloud_functions
    

    заполнить конфигурацию

  4. Теперь твоя функция работает по такому адресу https://d5dphasdln.apigw.yandexcloud.net, его можно посмотреть в поле служебный домен на открывшейся странице Адрес шлюза

Готово! 🙌

Вот такую картинку вы увидите в конце

Готово!

Что дальше?

Разработай свой апи

Добавь пару маршрутов со своими хендлерами

Router.Get("/users", listUsersHandle)
Router.Post("/user", setUserHandle)

Форкни!

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

Форкните

Ещё вот есть интересный гайд по git или прекрасный курс на Яндекс.Практикуме

Установить локально

  1. зайдите в папку
  2. скачайте в нее репозиторий
    git clone https://github.com/<ваше_имя>/<ваш_репозиторий> .

Локальный запуск

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

go run .

Сервер будет ждать на http://localhost:8080

Планы

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

Автор

За основу взят шаблон попроще

Дмитрий Фроленко 2023

go-chi-vue-yandex-cloud-template's People

Contributors

thefrol avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.