> For the complete documentation index, see [llms.txt](https://gurita-alexandru.gitbook.io/cloud-computing-2023-simpre/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gurita-alexandru.gitbook.io/cloud-computing-2023-simpre/seminar-2/deploy-vercel.md).

# Deploy - Vercel

**Prerequisites:** All past steps

Acum ca avem o aplicatie web functionala, tot ce ne ramane de facut este sa o facem accesibila pe internet

## 1. Creare proiect + Deploy

* In contul vostru Vercel, creati un nou proiect

<figure><img src="/files/RHL1WcUuOBwvZaL8KDJH" alt=""><figcaption></figcaption></figure>

* Daca aveti contul de GitHub conectat, veti vedea optiunea de a importa repository-ul proiectului. Daca nu, urmati instructiunile pentru a-l conecta

<figure><img src="/files/HlV2YM53YU8gLJNf78Ye" alt=""><figcaption></figcaption></figure>

* Alegeti o denumire, alegeti **Framework Preset - Next.js -> Deploy**

<figure><img src="/files/Bl1F6Z7cORymLhp15KyK" alt=""><figcaption></figcaption></figure>

## 2. Introducere env variables

Pentru datele din .env sunt secrete si nu sunt stocate pe GitHub, va trebui sa le introducem in Vercel

* Accesati proiectul -> Settings -> Environment Variables -> Introduceti variabilele asa cum sunt in proiectul vostru local

<figure><img src="/files/4XymIOtx6VLbirNOP15O" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/tHT4bDgm3jt0hXUzPfxk" alt=""><figcaption></figcaption></figure>

## 3. Redeploy

Pentru ca am modificat environment variables, va trebuie sa lansam din nou aplicatia.

* Din meniu -> Deployments -> Alegeti ultimul deploy -> optiuni -> Redeploy

<figure><img src="/files/Z9eNyQJ1MCqROkwMrvgk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/oJ2psTPMLEoZWa2dkuUX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Vom observa ca aplicatia inca nu functioneaza. Acest lucru se intampla deoarece MongoDB restrictioneaza accesul de la IP-uri necunoscute. Pentru a rezolva aceasta problema, vom aproba conexiunile de la orice IP (pentru ca NextJS foloseste IP-uri dinamice)
{% endhint %}

## 4. Allow all IP Connections in MongoDB

* In meniul MongoDB -> Network Access -> Add IP Address -> Allow access from anywhere -> Confirm

<figure><img src="/files/DJGMun8KnownrIfuD5dw" alt=""><figcaption></figcaption></figure>

* Aplicatia ar trebui acum sa functioneze! (refresh a couple of times, it might be cached)