Ecommerce em 2024

Adaptando o projeto medusajs para ser publicado na Vercel

Antes de começarmos vamos precisar fazer algumas atualizações no projeto para ser compatível com a Vercel. Para isso, vamos abrir o arquivo medusa-server/package.json e atualizar/adicionar as seguintes linhas:

...
"scripts": {
  "clean": "cross-env ./node_modules/.bin/rimraf dist",
  "build": "cross-env npm run clean && npm run build:server && npm run build:admin",
  "build:server": "cross-env npm run clean && tsc -p tsconfig.server.json",
  "build:admin": "medusa-admin build --deployment",
  "watch": "cross-env tsc --watch",
  "test": "cross-env jest",
  "seed": "cross-env medusa seed -f ./data/seed.json",
  "start": "cross-env npm run build && medusa start",
  "start:custom": "cross-env npm run build && node --preserve-symlinks --trace-warnings index.js",
  "dev": "cross-env npm run build:server && medusa develop",
  "dev:admin": "medusa-admin develop --backend {server_url}"
},
...

Lembre-se de substituir o {server_url} do último comando pelo valor salvo no arquivo credenciais.txt.

Agora nós vamos criar um arquivo chamado vercel.json dentro da pasta medusa-sever e adicionar o seguinte código:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Pronto, agora só enviar pro GitHub rodando os seguintes comandos em sequência:

git add .
git commit -m "adaptando pra vercel"
git push

Como subir o painel de administrator do medusajs na Vercel

Entre na sua conta da Vercel, vá no seu dashboard e clique em "Add New...":

Agora selecione o projeto medusa-server e clique em Import:

Em "Framework Preset" selecione "Other", em "Build and Output Settings" clique em "Override" nos três itens e cole o seguinte em cada um:

> Build Command: npm run build:admin
> Output Directory: build
> Install Command: npm i

Suas configurações devem ficar assim:

Agora expanda a aba de "Environment Variables" e crie as seguintes variáveis de ambiente:

> MEDUSA_BACKEND_URL: {server_url}
> STORE_CORS: http://localhost:8000,http://localhost:7001,SUBSTITUIR_DEPOIS
> ADMIN_CORS: SUBSTITUIR_DEPOIS
> MEDUSA_ADMIN_BACKEND_URL: {server_url}
> DATABASE_TYPE: postgres
> DATABASE_URL: {internal_database_url}
> MEDUSA_ADMIN_ONBOARDING_TYPE: default

Lembre-se de substituir o {server_url} e o {internal_database_url} pelos valores do arquivo credenciais.txt.

Importante: Ao substituir o {server_url} pela url em si, você deverá apagar a barra / no final, se você não fizer isso não vai funcionar.

Então suas variáveis de ambiente deverão ficar mais ou menos assim:

Agora só clicar em Deploy e aguardar por uns 5 minutos.

Depois que o deploy terminar nós vamos clicar em "Continue to Dashboard" e copiar o valor de baixo de "Domains":

Então vamos adicionar https:// na frente do domínio e salvar esse valor no arquivo credenciais.txt como admin_url:

> internal_database_url: COLE_AQUI_A_INTERNAL_DATABASE_URL
> internal_redis_url: COLE_AQUI_A_INTERNAL_REDIS_URL
> server_url: COLE_AQUI_O_SERVER_URL
> admin_url: https://COLE_AQUI_O_ADMIN_URL

Lembre-se: o projeto ainda não vai funcionar devido à problemas de CORS, mas vamos corrigir isso atualizando algumas variáveis de ambiente dentro da vercel e do render na próxima aula.