Автор оригинала: Anshul Sanghi.
Я видел много людей в группах в социальных сетях, спрашивая, есть ли проект котельной, присутствующий для угловой/реакции + GO. Как то угловой, так и увлекательнее себя, я решил создать один.
Проект, который я создал, можно найти здесь Отказ В этом посте мы посмотрим, как я создал его, чтобы вы могли понять, как он работает и настроить его, если хотите. Текущая котельная предлагает очень базовую настройку. Я буду работать над улучшением его в ближайшее время.
Обратите внимание, что эта котельная не считает, что подают угловое приложение с сервера. Эта настройка обрабатывает сервер Go и угловое приложение в виде двух отдельных объектов и помогает только в управлении их совместными или управлять своими зависимостями. С этой настройкой вы можете запустить каждый из них отдельно, если вам нужно, без каких-либо изменений.
Как уже упоминалось в Readme Github Repo, на сегодняшний день котельная только хорошая для целей развития. Вам все равно придется вручную построить клиентов и серверов вручную, а также модифицируя некоторые настройки (вы увидите их позже) вручную. Я работаю над автоматическим, но это займет некоторое время. В любом случае, давайте погрузимся в это.
Настройка клиента (угловой)
Предпосылки:
- У вас есть угловые CLI и NPM.
Во-первых, генерируйте новый угловой проект в папке SRC в вашем GoPath или любой подпасной папке SRC. Вы можете сделать это, открывая терминал в этой папке и запущении:
ng new your-awesome-project
Это будет генерировать новый угловой проект и будет устанавливать все зависимости для вас. Это это для клиентской стороны на данный момент.
Настройка сервера (GO)
Предпосылки:
- Вы пошли установлены.
- У вас есть Gohome и Gopath правильно настройки.
Во-первых, запустите следующее в терминале, чтобы установить джин.
go get github.com/codegangsta/gin
GIN – это утилита для перезарядки для перезарядки для серверов Go, которые автоматически создают и управляет сервером на изменениях в файлах .go. Это очень похоже на DEV WebPack Server – разница, являющаяся не только автоматически обновлять браузер и только восстановит сервер. Вам придется обновить браузер вручную, если вы обновите свой код сервера.
Далее мы собираемся установить еще два пакета GO: https://github.com/gorilla/mux обрабатывать маршрутизацию и https://github.com/rs kors Для обработки запросов по пересечению происхождения.
CORS означает общий ресурс по пересечению происхождения. Поскольку наш клиент и сервер будут работать на разных портах и в конечном итоге на разных доменах, позволяя просить запросы CORS от одного домена в другое должно быть явно настроен.
Для меня лучшее место, чтобы поставить весь мой серверный код, находится в папке, называемом сервером, внутри папки SRC в проекте, сгенерированном угловым CLI. Теперь три папки, с которыми мы будем работать, есть приложение , среда и сервер.
Давайте сначала настроим простой сервер Go и забыть о CORS на мгновение. Для простого сервера создайте файл под названием main.go Отказ Код в этом файле будет выглядеть что-то подобное:
package main
import (
"github.com/gorilla/mux"
"net/http"
"os"
"log"
"your-awesome-project/src/server/utils"
)
func main() {
r := mux.NewRouter()
r.HandleFunc("/hello-world", helloWorld)
http.Handle("/", r)
srv := &http.Server{
Handler: r,
Addr: ":" + os.Getenv("PORT"),
}
log.Fatal(srv.ListenAndServe())
}
func helloWorld(w http.ResponseWriter, r *http.Request) {
var data = struct {
Title string `json:"title"`
}{
Title: "Golang + Angular Starter Kit",
}
jsonBytes, err := utils.StructToJSON(data); if err != nil {
fmt.Print(err)
}
w.Header().Set("Content-Type", "application/json")
w.Write(jsonBytes)
return
}
Подожди, почему мы выбираем ADDR Из переменных окружающей среды ОС запустите наш сервер в Localhost? Это необходимое требование для Джина работать должным образом. Джин автоматически устанавливает порт (по умолчанию 3000), который вы можете измениться во время работы Gin.
Вы также можете заметить, что я также импортировал локальный пакет под названием Utils. В папке этого пакета есть файл под названием json.go Отказ Это будет содержать функции, которые будут обрабатывать все действия, связанные с json, такие как кодирование и декодирование. С целью этого поста нам понадобится только кодирование JSON. Вот какой код в json.go выглядит как:
package utils
import (
"encoding/json"
"bytes"
)
func StructToJSON (data interface{}) ([]byte, error) {
buf := new(bytes.Buffer)
if err := json.NewEncoder(buf).Encode(data); err != nil {
return nil, err
}
return buf.Bytes(), nil
}
Эта функция по существу создает новый буфер, который передается как аргумент для json.newencoder () Способ записи данных.
Буфер – это буфер из переменного размера байтов с методами чтения и записи. Нулевое значение для буфера – это пустой буфер, готовый к использованию.
Данные закодированные JSON записаны на этот новый буфер и могут быть прочитаны как [] байт или как строка Использование методов присутствующих на типе Буфер Отказ В этом случае мы возвращаем закодированные данные как [] байт Поскольку нам нужны кодированные данные в этом формате, чтобы иметь возможность записать его в нашем заголовке ответа.
Если вы запутались о том, почему тип аргумента для функции Structtojson имеет тип Интерфейс {} Или также известен как «пустой интерфейс», то же самое, что тип любой в типографии.
Теперь нам нужно выполнить способ для нашего клиента и сервера, чтобы запустить вместе и следить за изменениями, без необходимости выполнения этого процесса вручную. Я нашел простой способ сделать это.
Во-первых, создайте файл под названием Случай .sh В корне вашей папки проекта (в этом случае ваша-потрясающая папка проекта). Содержимое этого файла следующим образом:
#!/bin/sh ng serve & gin --port 4201 --path . --build ./src/server/ --i --all & wait
Хорошо, так что происходит? Если вы нуб в сценарии Bash, позвольте мне сказать вам, что это делает (я на самом деле оглянулся, пока не нашел этого – я не хорошо в сценарии Bash – спасибо Google!). Первая строка похожа на В том смысле, что он также определяет тип этого файла. Двигаясь, следующие две линии – это просто то, что вы бы запускали с терминала.
NG служить Запускает сервер WebPack Dev для угловых, а Джин --пор 4201 - Path. --build ./src/server/--i Отказ от утилиты Live Reveroad для Go Server на порту 4201, ищет изменения файлов в каталоге SRC, создает двоичный файл из ./src/server каталог и перезагружает сервер сразу после изменения файла. Для получения дополнительной информации о флагах, используемых Джином, посетите документы здесь Отказ
Вы можете в очереди столько команд, сколько вы хотели бы запустить, просто добавив & характер как суффикс к ним. В конце концов, линия, содержащая Подожди Таким местом, когда команды в очереди будут выполняться параллельно (да, параллельно, поэтому мы нуждались в том, чтобы мы были нужны сценарию Bash) и будем ждать всех их, чтобы закончить, что не произойдет, пока мы не ударим Ctrl + C в этом случае.
Другое преимущество (или невыгодное положение, возможно,?) Запуск серверов. Это то, что выход консоли для WebPack, так и Go Server будет напечатан в одной и той же консоли, из которой выполняется скрипт.
До того, как скрипт может быть выполнен, мы должны изменить его разрешения и сделать его исполняемым. Просто запустить Chmod 775 ./serve.sh В корневой папке (где присутствует файл SH), чтобы сделать его исполняемым.
В последний шаг, чтобы запустить его через NPM, просто отредактируйте Package.json файл. Под объектом скриптов отредактируйте значение Начать Ключ и сделай это “./serve.sh.” Как только это сделано, просто запустите NPM начать Одновременно раскрутит как серверы развития угнта и Go.
Теперь, когда у нас есть код на месте для начала наших серверов, давайте подключим их и проверим его. Во-первых, давайте установим базовый URL нашего сервера в средах, чтобы мы могли получить доступ к нему из любого места в нашем угловом приложении. Обновление окружающая среда Файл будет выглядеть так:
export const environment = {
production: false,
serverUrl: 'http://localhost:4201'
};
Теперь давайте создадим услугу, которая сделает запрос на наш сервер GO.
ng g s hello-world
Простая реализация будет выглядеть что-то подобное:
import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import {environment} from '../environments/environment';
import 'rxjs/add/operator/map';
@Injectable()
export class HelloWorldService {
constructor(private http: Http) { }
getTitle() {
return this.http.get(`${environment.serverUrl}/hello-world`)
.map(response => response.json());
}
}
В нашем App.comPonent.ts мы можем использовать эту услугу для получения заголовка с нашего сервера. Модифицированный файл будет выглядеть что-то подобное:
import {Component, OnInit} from '@angular/core';
import {HelloWorldService} from './hello-world.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title;
constructor(private hw: HelloWorldService) {}
ngOnInit() {
this.hw.getTitle()
.subscribe(data => this.title = data.title);
console.log(this.title);
}
}
Перед запуском приложения не забудьте добавить нашу новую услугу в список поставщиков, а также импорт Httpmodule Отказ
Время для проверки нашего приложения. Хит NPM начать от терминала, чтобы раскрутить серверы. Как только Go, и серверы WebPack работают, посетите http://localhost: 4200 в вашем браузере. Название будет пусто. Любое предположение почему? Корс! Вот что вы увидите в консоли:
Failed to load http://localhost:4201/hello-world: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
Это проблема, о которой я говорил ранее. Давайте реализуем CORS Пакет, который мы загрузили ранее и исправить эту проблему. Обновлено main.go Файл будет выглядеть так:
package main
import (
"github.com/gorilla/mux"
"net/http"
"os"
"log"
"angular-go-boilerplate/src/server/utils"
"fmt"
"github.com/rs/cors"
)
func main() {
r := mux.NewRouter()
r.HandleFunc("/hello-world", helloWorld)
// Solves Cross Origin Access Issue
c := cors.New(cors.Options{
AllowedOrigins: []string{"http://localhost:4200"},
})
handler := c.Handler(r)
srv := &http.Server{
Handler: handler,
Addr: ":" + os.Getenv("PORT"),
}
log.Fatal(srv.ListenAndServe())
}
func helloWorld(w http.ResponseWriter, r *http.Request) {
var data = struct {
Title string `json:"title"`
}{
Title: "Golang + Angular Starter Kit",
}
jsonBytes, err := utils.StructToJson(data); if err != nil {
fmt.Print(err)
}
w.Header().Set("Content-Type", "application/json")
w.Write(jsonBytes)
return
}
В Cors.options Структура, вы можете установить все домены, которые вы хотите разрешить пересеченные запросы о происхождении. В нашем случае это будет только один домен, и это http://localhost: 4200 Отказ Это все, что нам нужно. Вы также поймете, что сервер Go автоматически перезагружается, и вам просто нужно обновить браузер.
Примечание: Помните, что я упомянул ранее, что для производства настроится, вам придется вручную изменить несколько настроек. Это один из этих настроек. Я работаю над автоматическим устройством и обновит репо, а также в ближайшее время.
Вуаля! Мы сделали это. Наш стартовый проект для работы на Go + угловые проекты теперь завершен.
Управление зависимостями
Теперь давайте посмотрим, как нам проще поделиться кодом без возобновления зависимостей. Все, что вам нужно сделать, это в Package.json Файл, под скриптами: добавьте новую запись, имеющую ключ Установка-зависимости со значением NPM Install install && go github.com/codegsta/gin && get ./src/server/... Отказ Теперь вы и другие вкладчики могут просто установить все зависимости как для угловых, так и для работы NPM запустить установочные зависимости Отказ
Это все на сегодня. Я действительно надеюсь, что некоторые из вас нашли это полезным для ваших собственных проектов. Если у вас есть какие-либо предложения по улучшению котельной или этого поста, дайте мне знать.
Если вы нашли это полезным, оставьте хлопок и поделитесь этим с кем-то, кому это нужно. Следуйте за обновлениями, касающимися этого проекта и нескольких других, которые я планирую работать над.