Пошаговое руководство на высоком уровне Connecting React and Go
Это должно быть очень простое пошаговое руководство по обслуживанию приложения React с сервера Go с помощью Gin. В пошаговом руководстве предполагается, что у вас уже есть настройка среды Go и у вас есть базовые представления об использовании приложения create react для создания проектов реагирования.
Go налагает определенную структуру папок на проекты, чтобы вы могли легко создавать пакеты и совместно использовать их в проектах. Довольно крутая идея. Вы можете запустить следующее, чтобы увидеть, где находится ваш GOPATH
go env GOPATH
Вы должны увидеть что-то вроде этого:
/Users/blakedanson/go
Просто для большей ясности вы должны создать свой проект, вложенный в ваш каталог go. Он должен выглядеть примерно так, но с вашими именами пользователей:
/Users/blakedanson/go/src/github.com/synapticsynergy/multifamilyAnalysis
Создать новый проект
Сначала мы собираемся создать очень простую структуру папок для проекта. Вставьте компакт-диск с терминалом в корневой каталог.
mkdir -p $GOPATH/src/github.com/user/myProject cd $GOPATH/src/github.com/user/myProject touch main.go
Приложение React
Далее используйте создать приложение для реагирования. Если я не использую подмодуль git, я просто назову проект client, чтобы он находился в каталоге клиента в моем репозитории Github, содержащем как клиентский, так и серверный код. Если вы используете подмодуль git, вы можете легко сохранить отдельные репозитории для клиента и сервера, если у вас есть отдельные команды.
npx create-react-app client cd client npm start
Вот как должна выглядеть структура папок на этом этапе:
Вы не увидите папки build или node_modules, пока не выполните команды сборки yarn и yarn. Так что идите вперед, войдите в каталог клиента и выполните следующие команды:
$ cd client $ yarn $ yarn build
Сборка пряжи создаст производственную сборку, которую вы можете обслуживать со своего сервера Go.
Создайте свой сервер Go
Теперь вот несколько очень простых шаблонов для вашего файла main.go для обслуживания этих статических файлов, которые были созданы Webpack с использованием сборки yarn.
Пакеты Go
иди, получи свои зависимости для Джина:
go get -u github.com/gin-gonic/gin go get -u github.com/gin-gonic/contrib/static
Отредактируйте файл main.go
После этого запустите сервер из корневого каталога.
go run main.go
Вы должны увидеть что-то подобное в терминале, если он сработал:
Теперь перейдите в браузере к localhost: 5000, и вы должны увидеть там типичный стартовый экран приложения create response.
Почему бы не использовать порт 3000?
Webpack настроен из коробки с помощью приложения create react для использования порта 3000 для передачи изменений во время разработки. Однако вам нужно, чтобы ваш api указывал на другой порт только для разработки. Это означает, что технически у вас будет два сервера в разработке, но только один сервер со статическими файлами, созданными в процессе разработки. Затем вы добавите прокси в свой файл package.json для подключения к вашему api для вызовов ajax из внешнего интерфейса для прокси-сервера вашего go-сервера. Это очень распространенный шаблон при работе с проектами с полным стеком реагирования. Это то, что вы должны добавить в свой package.json, когда будете готовы создать API на своем сервере Go:
"proxy": "http://localhost:5000",
Этот прокси-сервер не имеет значения, когда вы работаете в производственной среде, поскольку статические файлы будут обслуживаться с вашего сервера go, а не с сервера разработки узлов. Это означает, что вызовы ajax будут обращаться к правильному порту.
Заключение
На этом мое пошаговое руководство закончено, надеюсь, оно было полезно. Когда у меня будет немного больше времени, я покажу несколько примеров написания конечных точек api на сервере go и их вызова из реакции.
