РЕАКТ – это библиотека JavaScript для построения пользовательских интерфейсов. Первоначально он был создан Facebook, и в течение многих лет он стал одним из самых широко используемых библиотек Frontend. Реагистрация особенно мощна при строительстве одностраничных или мобильных приложений.
Вы можете создать свою реактивный интерфейс локально. Местный опыт развития является одним из лучших, есть. Но вполне вероятно, что в производстве ваша реактивный интерфейс собирается работать вместе с другими услугами, таких как бэкэнда или база данных. Что вы собираетесь делать тогда? Как правило, вы бы заканчиваете издеваться над бэкэнда или вызовевая версию постановки, рендеринг местных условий развития очень сложным …
В этом посту я покажу, как вы можете воспользоваться различными функциями Октето облако Чтобы облегчить, чем когда-либо, чтобы построить приложение React. Вы все еще можете получить выгоду от реактивного опыта развития реагирования, но вы также получите доступ к полностью интегрированному, подобно производственному развитию среду разработки, включенные бэкэнда. Привет Okteto Up Прощайся только для производства ошибок 👋🏼!
Если вы хотите пропустить все инструкции, окончательная версия приложения мы строим на этом посте Доступен здесь Отказ
Сначала установите Keteto cli Отказ Мы будем использовать его для создания среды разработки и для создания и развертывания нашего приложения.
MacOS/Linux.
$ curl https://get.okteto.com -sSfL | sh
Окна Скачать https://downloads.okteto.com/Cli/okteto.exe и добавьте его к вашему $ Путь .
Затем создайте папку для нашего кода:
$ mkdir my-app
Одним из крупных преимуществ использования OKTETO CLI является то, что он дает нам возможность определять и запускать среды разработки непосредственно в облаке Okteto. Таким образом, у нас могут быть все наши инструменты и зависимости предварительно установлены и доступны для нас с одной командой, а не на необходимость беспорядок с локальными конфигурацией и конфликтующими настройками.
Инициализируйте свою среду разработки, запустив okteto init команда. Поскольку мы строим приложение React, мы выберем JavaScript шаблон:
$ cd my-app $ okteto init
Recommended image for development with javascript: okteto/node:10 Which docker image do you want to use for your development environment? [okteto/node:10]: ✓ Okteto manifest (okteto.yml) created
Эта команда создаст два файла в вашей папке, okteto.yml и .stignore . okteto.yml Это то, что говорит Okteto CLI, как выглядит ваша среда развития. В этом случае он говорит, что вы хотите использовать Okteto/Node: 10 Как изображение, что ваш Workdir – /usr/src/app и что начальная команда будет башмак . .stignore Рассказывает OKTETO CLI, какие файлы не синхронизируются в вашу среду разработки (подробнее об этом позже).
Теперь, когда у нас есть наш манифест, давайте запустим нашу среду развития. Во-первых, давайте войти в Okteto Cloud, запустив Okteto Login. команда. Команда откроет браузер, чтобы вы могли аутентифицироваться с GitHub, и он загрузит ваши учетные данные об облачных данных Okteto и сертификаты. Если это первый раз, когда вы используете Okteto Cloud, он также создаст бесплатную учетную запись для вас.
$ okteto login
Authentication will continue in your default browser
You can also open a browser and navigate to the following address:
...
...
✓ Logged in as rberrelleza
✓ Updated context 'cloud_okteto_com' in '/Users/ramiro/.kube/config'
Run 'okteto namespace' every time you need to activate your Okteto context again.
Теперь, когда мы вошли в систему, запустите Okteto Up Команда для запуска вашей среды разработки. Поскольку это первый раз, когда мы запускаем его, мы будем использовать - Необходимость . аргумент
$ okteto up --deploy
✓ Development environment activated
✓ Files synchronized
Namespace: rberrelleza
Name: my-app
Welcome to your development environment. Happy coding!
okteto>
С этим ваша среда разработки работает и работает в облако октето, и у вас есть удаленный терминал для доступа к нему (запомнить команду bash в okteto.yml ?). Но это не все. Okteto Up Также сохраняет вашу локальную папку и синхронизированную среду дистанционного развития. Любой файл, который вы редактируете, локально или удаленные, будут мгновенно синхронизированы на другой стороне (если он не указан на .stignore ).
Чтобы создать начальный скелет приложения, мы будем использовать Create-raction-app Отказ Запустите следующую команду в среде удаленного разработки, чтобы создать свою:
okteto> npx create-react-app client
npx: installed 99 in 16.715s Creating a new React app in /usr/src/app/client. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ... ... ... We suggest that you begin by typing: cd client yarn start Happy hacking!
Через минуту или два команда завершит установку всех необходимых файлов и зависимостей. Если вы пойдете вперед и откроете свой локальный IDE, вы увидите, что файлы уже есть, вежливость ОКТЕТО Возможности синхронизации файлов.
Следуйте инструкциям в UI (с небольшим дополнением) и запустите свое приложение React:
export PORT=8080 cd client yarn start
Когда вы запускаете свою среду разработки в облаке Okteto, вы автоматически получаете публичные HTTPS EndPoint для нее, действующий сертификат включен. Все, что вам нужно сделать, это убедиться, что ваш процесс запускается в порту 8080 (вот почему я добавил Export в командах выше). Таким образом, вы можете начать доступ к вашему применению так же, как ваши пользователи собираются, с самого начала. Получить URL конечной точки, собираясь на Октето облако :
Нажмите на URL, чтобы увидеть ваше приложение в прямом эфире в Октето облако!
Теперь, когда у нас есть наше начальное приложение, пришло время взломать его немного. Как насчет того, чтобы заменить логотип React для Okteto’s?
Загрузить My-App папка в вашей любимой IDE и открыть Клиент/SRC/App.js Отказ Это файл, который имеет основную логику приложения. Измените это так, чтобы он использовал Логотип Okteto вместо реагирования:
import React from 'react';
import './App.css';
function App() {
return (
Edit src/App.js and save to reload.
Learn React
);
}
export default App;
Сохраните файл и перейдите в свой браузер. Подождите секунду и посмотрите, как он автоматически меняется в логотип Okteto. Это тот же опыт, который вы получаете при разработке локально. Но это происходит непосредственно в вашей среде дистанционного развития 🧙♂️!
Как это случилось?
Когда вы сохранили файл, он автоматически запускается следующие события:
- Okteto обнаружил локальное изменение и синхронизировало его к вашей среде удаленной разработки.
- Сервер DEV RACT обнаружил изменение и автоматически восстановит файлы.
- Реагируйте использовать их Websocket Dev для автоматического перезагрузки содержимого в вашем браузере.
Довольно круто нет?
Теперь, когда у нас есть наш интерфейс, как насчет того, чтобы дать ему API? Для этого примера давайте создадим простой API, который возвращает URL-адрес логотипа, вместо того, чтобы он был жесткозедирован в URL.
Мы сделаем нашу API в Nodejs, чтобы сохранить вещи в семье JavaScript. Вернитесь к своему IDE, создайте Server.js И вставьте следующий код на нем:
const express = require('express');
const bodyParser = require('body-parser')
const app = express();
const port = process.env.PORT || 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/api', (req, res) => {
res.json({logo: 'https://okteto.com/icons/icon-384x384.png'});
});
app.listen(port, "0.0.0.0", () => console.log(`Listening on port ${port}`));
Тогда создайте package.json и вставьте содержание ниже.
{
"name": "react-express",
"main": "server.js",
"scripts": {
"server": "nodemon server.js"
},
"devDependencies": {
"concurrently": "^5.1.0"
},
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"nodemon": "^2.0.3"
}
}
Вернитесь к вашему удаленному терминалу и остановите веб-сервер React (Ctrl + C должен сделать это). Затем вернитесь к Workdir из вашей дистанционной среды ( /usr/src/app ) и установите необходимые зависимости, работающие Установка пряжи :
okteto> yarn install
yarn install v1.22.4 ... ... ... success Saved lockfile. Done in 54.50s.
Начните свой API, запустив Запуск пряжи :
okteto> yarn start
yarn run v1.22.4 warning package.json: No license field $ node server.js Listening on port 8080
Вы можете подтвердить, что ваш API делает правильную вещь, возвращаясь к браузеру, добавьте /API к URL-адресу и ударить ввод. На этот раз вы получите выход API вместо вашего приложения React, поскольку это процесс, который мы в настоящее время работаем.
Чтобы запустить все вместе, мы собираемся использовать React’s Особенность прокси API . Это позволяет оба служить нашим статическим активам, а также вызовами API с одного и того же сервера. Чтобы включить его, добавьте прокси ключ к клиент/package.json :
... "proxy": "http://localhost:3000" ...
Мы также собираемся добавить следующие скрипты на package.json Чтобы иметь возможность начать оба сервера RACT DEV, так и Server.js в то же время:
...
"scripts": {
"server": "nodemon server.js",
"client": "yarn --cwd client start",
"dev": "concurrently --kill-others-on-fail \"PORT=3000 yarn server\" \"DANGEROUSLY_DISABLE_HOST_CHECK=true yarn client\""
},
...
Вернитесь к вашему удаленному терминалу, остановите Server.js и бежать пряжа dev Чтобы начать оба сервера на этот раз:
okteto> yarn dev
yarn run v1.22.4 ... ...
Теперь, когда у нас есть как наше приложение React, так и наше API, давайте поставить их на работу вместе. Для этого мы собираемся использовать React’s ComponentDidmount () Крючок, чтобы вызвать API прямо перед отображением браузера. Для этого обновите Клиент/SRC/App.js следующее:
import React, {Component} from 'react';
import './App.css';
class App extends Component {
state = {logo: ''};
componentDidMount(){
fetch('/api')
.then(r => r.json())
.then(b => this.setState({logo: b.logo}))
}
render(){
return(
Edit src/App.js and save to reload.
Learn React
);
}
}
export default App;
Вернитесь в свой браузер и перезагрузите страницу, чтобы увидеть все работает вместе. Если вы откроете инструменты разработчика для проверки запросов, вы сможете увидеть вызов нашему новым API.
Теперь, когда наш код готов, пришло время отправить его. Для этого мы собираемся воспользоваться двумя функциями Okteto Cloud’s: Okteto Build Service и Registry okteto.
Во-первых, давайте сделаем окончательное изменение нашего приложения для включения Производство режим. Открыть Server.js и внесите следующие изменения:
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path')
const app = express();
const port = process.env.PORT || 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/api', (req, res) => {
res.json({logo: 'https://okteto.com/icons/icon-384x384.png'});
});
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use(express.static(path.join(__dirname, 'client/build')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
app.listen(port, "0.0.0.0", () => console.log(`Listening on port ${port}`));
Это позволит нашему узеру API служить статическими файлами React, в то время как Производство режим.
Наконец, создайте следующее Dockerfile Чтобы сообщить OKTETO, как построить нашу приложение:
FROM okteto/node:10 as build WORKDIR /usr/src/app COPY package.json yarn.lock ./ COPY client/package.json client/yarn.lock client/ RUN yarn install COPY . . RUN yarn --cwd client build ENV PORT 8080 ENV NODE_ENV production CMD ["node", "server.js"]
С этим мы готовы развернуть производственную версию нашего приложения в Октето облако. Вернитесь к удаленному терминалу, остановите серверы, нажав Ctrl + C и выйдите из среды разработки. Тогда просто запустите Okteto Push подтолкнуть ваши изменения в производство.
$ okteto push --deploy
i Development environment deactivated i Running your build in Okteto Cloud... ... ... ------ > importing cache manifest from registry.cloud.okteto.net/rberrelleza/my-app:okteto: ------ ✓ Source code pushed to the development environment 'my-app'
Okteto Push Команда автоматически делает все необходимое для полного развертывания вашего приложения в Okteto Cloud. Это будет: Нажмите свой код изменения в Okteto Build Service Создайте новый контейнер удаленно, пометите его, нажмите его на Реестр Okteto и автоматически развернуть ваше приложение. Все это (и больше) в одной команде!
Как только команда закончена, вернитесь в свой браузер и перейдите в облако октето. Вы заметите, что ваше приложение больше не имеет okteto-зеленый значок. Это потому, что это производственная версия вашей заявки, а не только среда вашего развития!
В этом посте мы показали вам, как построить Action + App Express с облаком Okteto. Мы говорили о преимуществах развития в полной интегрированной среде развития по сравнению с простыми вещами на местном уровне. Затем мы говорили о том, как использовать Okteto CLI для инициализации и развертывания вашей среды удаленной разработки. Наконец, мы ходили, как использовать Okteto CLI и услуги по сборке и реестре OKTETO и реестра для создания, предварительного просмотра и отправки вашего приложения.
Облако Октето бесплатно для всех разработчиков. Получите свой аккаунт на https://cloud.okteto.com И начните строить ваши приложения сегодня.
Оригинал: “https://dev.to/okteto/build-your-react-express-app-in-okteto-cloud-5g3h”