Вы один из тех людей, которые приступают к созданию крутого веб-сайта, а затем испытывают трудности с развертыванием в облаке?
Привет, я человек.
Недавно я создал действительно классное веб-приложение (привет Phoenix Project - веб-приложение запускается * скоро *)!
Это приложение Server-Side Rendered React (SSR), использующее мощь Razzle, инструмента, который предоставляет вам конфигурацию, необходимую для создания приложения SSR React.js. Что замечательно в Razzle, так это то, что он хорошо задокументирован сообществом технологов, приверженных поддержке проекта.
К сожалению, мне не удалось найти четких инструкций по развертыванию моего приложения Razzle в Google App Engine (GAE). Я собираюсь поделиться некоторыми своими ошибками при развертывании моего приложения.
Я не собираюсь здесь полностью воссоздавать колесо! Вы можете начать с обзора Краткое руководство по Google для приложений Node.js. Моя сборка в конечном итоге выглядела немного иначе, чем эта.
Это будет выглядеть примерно так:
Шаг 1. Добавьте свой app.yaml
В корне вашего каталога создайте файл app.yaml. Этот файл содержит конфигурацию, необходимую GAE для запуска вашего приложения. Вот мой.
runtime: custom
env: flex
manual_scaling:
instances: 1
# resources:
# cpu: 1
# memory_gb: 1.5
# disk_size_gb: 10
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
http_headers:
Access-Control-Allow-Origin: "*"
- url: /.*
script: auto
secure: always
Среда выполнения * custom * сообщает app.yaml искать соответствующий Dockerfile. В документах GAE указано, что nodejs будет использоваться для «времени выполнения», но у меня это не сработало. Проблема, с которой я постоянно сталкивался, заключалась в том, что проект некорректно собирал и запускал производственную версию при развертывании. Скорее, проект зависнет или не будет обслуживать ЛЮБЫЕ статические активы / javascript.
Шаг 2: добавляем докер
Это был секретный соус для меня. В корне вашего каталога создайте файл с именем Dockerfile. App.yaml будет ссылаться на этот файл при развертывании.
Вот мой:
FROM gcr.io/google_appengine/nodejs WORKDIR / ADD . . RUN npm install EXPOSE 5000 RUN npm run build CMD ["npm", "run", "start:prod"]
Кикером здесь для меня было включение * RUN npm run build *. До добавления Docker мое приложение не собиралось в продакшене. И я не хотел запускать команду сборки локально, а затем напрямую отправлять этот файл сборки.
Шаг 3: razzle.config.js
Добавьте файл razzle.config.js в свой корневой каталог. Это отменяет конфигурацию starndar Razzle. Это произошло прямо из примера конфигурации поставщика, предоставленного Razzle.
'use strict';
module.exports = {
modify(defaultConfig, { target, dev }, webpack) {
const config = defaultConfig; // stay immutable here
// Change the name of the server output file in production
if (target === 'web') {
// modify filenaming to account for multiple entry files
config.output.filename = dev
? 'static/js/[name].js'
: 'static/js/[name].[hash:8].js';
// add another entry point called vendor
config.entry.vendor = [
require.resolve('react'),
require.resolve('react-dom'),
];
config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
}
if (target === "node") {
config.externals = []
}
// }
}
return config;
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
}
Вот и все! Это все, что вам нужно для развертывания приложения React в Google App Engine.
Но вот несколько дополнительных советов.
- При развертывании приложения помните, что оболочка файлов имеет значение. Например, если вы импортируете ‘../ A pp.css’ в ваш файл `App.js`, вам лучше подобрать регистр. Под этим я подразумеваю, что если вы импортируете `../ a pp.css` в свой файл, он будет работать локально, но взорвет ваше приложение в рабочей среде. Регистр файла и оператора импорта ДОЛЖЕН совпадать.
- Привыкайте к чтению журналов. В консоли GAE есть раздел «ведение журнала». Когда вас ударили о стену, определите, где именно произошла ошибка и почему. Кроме того, при развертывании включайте `verbosity = debug`. Это даст вам более подробную информацию при развертывании. Это был мой полный оператор развертывания: `gcloud app deploy - verbosity = debug - stop-previous-version - version = prod`
Этот пост вам вообще помог? Считаете, что любая тема заслуживает почетного упоминания или глубокого погружения? Позвольте мне знать в комментариях ниже!
