Construí esto, ¿y ahora qué? Cómo implementar una aplicación React en un Droplet de DigitalOcean.

La mayoría de los aspirantes a desarrolladores han subido sitios HTML estáticos antes. El proceso no es demasiado abrumador, ya que básicamente solo está moviendo archivos de una computadora a otra, y luego ¡BAM! Sitio web.

Pero aquellos que han abordado el aprendizaje de React a menudo invierten cientos o incluso miles de horas en aprender sobre componentes, accesorios y estados, solo para quedarse con la pregunta "¿Cómo puedo alojar esto?" No temas, compañero desarrollador. La implementación de su última obra maestra es un poco más profunda, pero no demasiado difícil. Así es cómo:

Preparación para la producción

Hay algunas cosas que querrá hacer para preparar su aplicación para la implementación.

Apague a los trabajadores del servicio

Si ha utilizado algo como create-react-app para iniciar su proyecto, querrá desactivar el trabajador de servicio integrado si no lo ha integrado específicamente para que funcione con su aplicación. Aunque generalmente es inofensivo, puede causar algunos problemas, por lo que es mejor deshacerse de él desde el principio. Busque estas líneas en su src/index.jsarchivo y elimínelas:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Prepara tu servidor

Para sacar el máximo partido a su inversión, una compilación de producción minimizará el código y eliminará los espacios en blanco y los comentarios adicionales para que la descarga sea lo más rápida posible. Crea un nuevo directorio llamado /build, y debemos asegurarnos de decirle a Express que lo use. En la página de su servidor, agregue esta línea:app.use( express.static( `${__dirname}/../build` ) );

A continuación, deberá asegurarse de que sus rutas sepan cómo llegar a su archivo index.html. Para hacer esto, necesitamos crear un punto final y colocarlo debajo de todos los demás puntos finales en su archivo de servidor. Debe tener un aspecto como este:

const path = require('path')app.get('*', (req, res)=>{ res.sendFile(path.join(__dirname, '../build/index.html'));})

Crea la construcción de producción

Ahora que Express sabe cómo usar el /builddirectorio, es hora de crearlo. Abra su terminal, asegúrese de estar en el directorio de su proyecto y use el comandonpm run build

Mantenga sus secretos a salvo

Si está utilizando claves de API o una cadena de conexión de base de datos, es de esperar que ya las haya ocultado en un .envarchivo. Toda la configuración que sea diferente entre implementada y local también debe incluirse en este archivo. Las etiquetas no pueden ser proxy, por lo que tenemos que codificar en la dirección de backend cuando usamos el servidor de desarrollo React, pero queremos usar rutas relativas en producción. Su .envarchivo resultante podría verse así:

REACT_APP_LOGIN="//localhost:3030/api/auth/login"REACT_APP_LOGOUT="//localhost:3030/api/auth/logout"DOMAIN="user4234.auth0.com"ID="46NxlCzM0XDE7T2upOn2jlgvoS"SECRET="0xbTbFK2y3DIMp2TdOgK1MKQ2vH2WRg2rv6jVrMhSX0T39e5_Kd4lmsFz"SUCCESS_REDIRECT="//localhost:3030/"FAILURE_REDIRECT="//localhost:3030/api/auth/login"
AWS_ACCESS_KEY_ID=AKSFDI4KL343K55L3AWS_SECRET_ACCESS_KEY=EkjfDzVrG1cw6QFDK4kjKFUa2yEDmPOVzN553kAANcy
CONNECTION_STRING="postgres://vuigx:[email protected]:5432/vuigx"NODE_ENV=development

Empuje su código

Pruebe su aplicación localmente yendo //localhost:3030y reemplazando 3030 con el puerto de su servidor para asegurarse de que todo funcione sin problemas. Recuerde iniciar su servidor local con node o nodemon para que esté en funcionamiento cuando lo verifique. Una vez que todo se vea bien, podemos enviarlo a Github (o Bit Bucket, etc.).

¡IMPORTANTE! Antes de hacerlo, verifique que su .gitignorearchivo contenga .envy /buildque no esté publicando información confidencial o archivos innecesarios.

Configuración de DigitalOcean

DigitalOcean es una plataforma de alojamiento líder y hace que sea relativamente fácil y rentable implementar sitios React. Utilizan Droplets, que es el término que utilizan para sus servidores. Antes de crear nuestro Droplet, todavía tenemos un poco de trabajo por hacer.

Creación de claves SSH

Los servidores son computadoras que tienen direcciones IP públicas. Debido a esto, necesitamos una forma de decirle al servidor quiénes somos, de modo que podamos hacer cosas que no quisiéramos que nadie más hiciera, como realizar cambios en nuestros archivos. Su contraseña diaria no será lo suficientemente segura, y una contraseña lo suficientemente larga y compleja para proteger su Droplet sería casi imposible de recordar. En su lugar, usaremos una clave SSH.

Para crear su clave SSH, ingrese este comando en su terminal: ssh-keygen -t rsa

Esto inicia el proceso de generación de claves SSH. Primero, se le pedirá que especifique dónde guardar la nueva clave. A menos que ya tenga una clave que necesita conservar, puede mantener la ubicación predeterminada y simplemente presione Intro para continuar.

Como una capa adicional de seguridad en caso de que alguien se apodere de su computadora, tendrá que ingresar una contraseña para asegurar su clave. Su terminal no mostrará sus pulsaciones de teclas mientras escribe esta contraseña, pero la sigue. Una vez que presione enter, tendrá que escribirlo una vez más para confirmar. Si tiene éxito, ahora debería ver algo como esto:

Generating public/private rsa key pair.Enter file in which to save the key (/Users/username/.ssh/id_rsa):Enter passphrase (empty for no passphrase):Enter same passphrase again:Your identification has been saved in demo_rsa.Your public key has been saved in demo_rsa.pub.The key fingerprint is:cc:28:30:44:01:41:98:cf:ae:b6:65:2a:f2:32:57:b5 [email protected] key's randomart image is:+--[ RSA 2048]----+|=*+. ||o. || oo || oo .+ || . ....S || . ..E || . + ||*.= ||+Bo |+-----------------+

¿Que pasó?

Se han creado dos archivos en su computadora: id_rsay id_rsa.pub. El id_rsaarchivo es su clave privada y se usa para verificar su firma cuando usa el id_rsa.pubarchivo o clave pública. Necesitamos dar nuestra clave pública a DigitalOcean. Para conseguirlo, ingrese cat ~/.ssh/id_rsa.pub. Ahora debería ver una larga cadena de caracteres, que es el contenido de su id_rsa.pubarchivo. Se parece a esto:

ssh-rsaAABC3NzaC1yc2EAAAADAQABAAABAQDR5ehyadT9unUcxftJOitl5yOXgSi2Wj/s6ZBudUS5Cex56LrndfP5Uxb8+Qpx1D7gYNFacTIcrNDFjdmsjdDEIcz0WTV+mvMRU1G9kKQC01YeMDlwYCopuENaas5+cZ7DP/qiqqTt5QDuxFgJRTNEDGEebjyr9wYk+mveV/acBjgaUCI4sahij98BAGQPvNS1xvZcLlhYssJSZrSoRyWOHZ/hXkLtq9CvTaqkpaIeqvvmNxQNtzKu7ZwaYWLydEKCKTAe4ndObEfXexQHOOKwwDSyesjaNc6modkZZC+anGLlfwml4IUwGv10nogVg9DTNQQLSPVmnEN3Z [email protected]

¡Eso es una contraseña! Copie la cadena manualmente o use el comando pbcopy < ~/.ssh/id_rsa.pub para que la terminal la copie por usted.

Agregar su clave SSH a DigitalOcean

Inicie sesión en su cuenta de DigitalOcean o regístrese si aún no lo ha hecho. Vaya a su Configuración de seguridad y haga clic en Agregar SSH. Pega la clave que copiaste y dale un nombre. Puede nombrarlo como quiera, pero es una buena idea hacer referencia a la computadora en la que se guarda la clave, especialmente si usa varias computadoras con regularidad.

Crear una gota

Con la llave en su lugar, finalmente podemos crear nuestro Droplet. Para comenzar, haga clic en Crear droplet. Se le pedirá que elija un sistema operativo, pero para nuestros propósitos, el Ubuntu predeterminado funcionará bien.

You’ll need to select which size Droplet you want to use. In many cases, the smallest Droplet will do. However, review the available options and choose the one that will work best for your project.

Next, select a data center for your Droplet. Choose a location central to your expected visitor base. New features are rolled out by DigitalOcean in different data centers at different times, but unless you know you want to use a special feature that’s only available in specific locations, this won’t matter.

If you want to add additional services to your Droplet such as backups or private networking, you have that option here. Be aware, there is an associated cost for these services.

Finally, make sure your SSH key is selected and give your Droplet a name. It is possible to host multiple projects on a single Droplet, so you may not want to give it a project-specific name. Submit your settings by clicking the Create button at the bottom of the page.

Connecting to your Droplet

With our Droplet created, we can now connect to it via SSH. Copy the IP address for your Droplet and go back to your terminal. Enter ssh followed by [email protected], where youripaddress is the IP address for your Droplet. It should look something like this: ssh [email protected]. This tells your computer that you want to connect to your IP address as the root user. Alternatively, you can set up user accounts if you don’t want to login as root, but it’s not necessary.

Installing Node

To run React, we’ll need an updated version of Node. First we want to run apt-get update && apt-get dist-upgrade to update the Linux software list. Next, enter apt-get install nodejs -y, apt-get install npm -y, and npm i -g n to install Nodejs and npm.

Your React app dependencies might require a specific version of Node, so check the version that your project is using by running node -v in your projects directory. You’ll probably want to do this in a different terminal tab so you don’t have to log in through SSH again.

Once you know what version you need, go back to your SSH connection and run n 6.11.2, replacing 6.11.2 with your specific version number. This ensures your Droplet’s version of Node matches your project and minimizes potential issues.

Install your app to the Droplet

All the groundwork has been laid, and it’s finally time to install our React app! While still connected through SSH, make sure you’re in your home directory. You can enter cd ~ to take you there if you’re not sure.

To get the files to your Droplet, you’re going to clone them from your Github repo. Grab the HTTP clone link from Github and in your terminal enter git clone //github.com/username/my-react-project.git. Just like with your local project, cd into your project folder using cd my-react-project and then run npm install.

Don’t ignore your ignored files

Remember that we told Git to ignore the .env file, so it won’t be included in the code we just pulled down. We need to add it manually now. touch .env will create an empty .env file that we can then open in the nano editor using nano .env. Copy the contents of your local .env file and paste them into the nano editor.

We also told Git to ignore the build directory. That’s because we were just testing the production build, but now we’re going to build it again on our Droplet. Use npm run build to run this process again. If you get an error, check to make sure you have all of your dependencies listed in your package.json file. If there are any missing, npm install those packages.

Start it up!

Run your server with node server/index.js (or whatever your server file is named) to make sure everything is working. If it throws an error, check again for any missing dependencies that might not have been caught in the build process. If everything starts up, you should now be able to go to ipaddress:serverport to see your site: 123.45.67.8:3232. If your server is running on port 80, this is a default port and you can just use the IP address without specifying a port number: 123.45.67.8

You now have a space on the internet to call your own! If you have purchased a domain name you’d like to use in place of the IP address, you can follow DigitalOcean’s instructions on how to set this up.

Keep it running

Your site is live, but once you close the terminal, your server will stop. This is a problem, so we’ll want to install some more software that will tell the server not to stop once the connection is terminated. There are some options for this, but let’s use Program Manager 2 for the sake of this article.

Kill your server if you haven’t already and run npm install -g pm2. Once installed, we can tell it to run our server using pm2 start server/index.js

Updating your code

At some point, you’ll probably want to update your project, but luckily uploading changes is quick and easy. Once you push your code to Github, ssh into your Droplet and cd into your project directory. Because we cloned from Github initially, we don’t need to provide any links this time. You can pull down the new code simply by running git pull.

To incorporate frontend changes, you will need to run the build process again with npm run build. If you’ve made changes to the server file, restart PM2 by running pm2 restart all. That’s it! Your updates should be live now.