Coder Social home page Coder Social logo

webavancado's Introduction

Recursos Web Avançado

Com este tutorial você sera capaz de: Rodar seu backend na DigitalOcean. Enviar seu frontend ReactJs online. Integração contínua no backend com Buddy.works e Netlify no frontend, apenas dando commit no github.

Tabela de conteudo


Criar droplet na DigitalOcean

Passo a passo de como criar o droplet:

1. Vai em create e depois seleciona droplet

Create

2. Após entrar na tela de criação, você seleciona o sistema operacional a seu gosto, mas aqui irei utilizar o Ubuntu 18.04.3 (LTS ) x64.

3. Selecionar qual será o plano de hospedagem. Para uma aplicação basica, o plano de $5/mês resolve bem, então estarei utilizando-o.

Choose plan

4. Selecionar onde vai ficar a região do datacenter:

Choose datacenter region

5. Nessa parte é preferivel usar o SSH Keys:

SSH

6. Aperte em 'New SSH Key' para adicionar uma nova chave na DigitalOcean, se você já tem gerado uma ssh key no seu pc, copie-a e cole no campo que apareceu (caminho para a chave: ~/.ssh/id_rsa.pub ). Se você não tiver, siga o tutorial que aparece no canto direito da tela de adicionar chave. Depois de adicionar, verifique de selecionar o checkbox.

SSH

7. Depois basta escolher o nome para sua host e apertar em criar droplet.

Configuração inicial depois de instalar o ubuntu

Logando como root e criando novo usuario

1. ssh root@server_ip

2. Não é ideal ficar fazendo alterações com a conta root, então vamos criar um novo user, como exemplo irei usar meu nome, mas lembre de mudar para o seu nome de usuario:

adduser victor

3. Daremos acesso de administrador a esse usuario:

usermod -aG sudo victor

4. Ligando o firewall e permitindo conexões ssh:

ufw allow OpenSSH
ufw enable

5. Se você optou por usar o SSH key ao inves da senha, você ira precisar copiar a sua chave ssh para o ~/.ssh/authorized_keys, para isso use o seguinte comando:

rsync --archive --chown=victor:victor ~/.ssh /home/victor

6. Agora de logout e entre com a conta:

ssh victor@server_ip

Instalando Node.js e yarn

1. A seguir irei passar o comando necessario para instalar o Node.js 12

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs

Se preferir a versão LTS:

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install nodejs

2. Instalando yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

webavancado's People

Contributors

victorhas avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.