Nodejs/Express Uygulaması Vercel'e nasıl deploy edilir ?

Baki Gül

2 Yıl önce

#nodejs

#vercel

#deploy

Önkoşullar

Adım 1

Vercel'de hesabınız yok ise bir hesap oluşturun

Vercel, iş akışınıza mükemmel şekilde uyan statik siteler ve sunucusuz İşlevler için bir bulut platformudur. Geliştiricilerin anında devreye giren, otomatik olarak ölçeklenen ve denetim gerektirmeyen Jamstack web sitelerini ve web hizmetlerini yapılandırma olmadan barındırmasına olanak tanır.

Adım 2

Vercel'i bilgisayarınıza global olarak kurmak için npm kullanın

npm i -g vercel

Projeyi kurun

Proje oluştur

mkdir vercel-node-app
cd vercel-node-app
touch index.js
npm init -y
npm i express

Projeyi kod düzenleyicinizde açın ve ardından index.js dosyasında bir node sunucusu oluşturun.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
    // Note: __dirname is the current directory you're in. Try logging it and see what you get!
    // Mine was '/Users/zellwk/Projects/demo-repos/crud-express-mongo' for this app.
  })


app.get('/about', (req, res) => res.send('About Page Route'));

app.get('/portfolio', (req, res) => res.send('Portfolio Page Route'));

app.get('/contact', (req, res) => res.send('Contact Page Route'));

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));

Aşağıdaki komut ile index.html dosyası oluşturun.

touch index.html

index.html dosyasının içine aşağıdaki kodu yerleştirin.

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('https://images.unsplash.com/photo-1578070181910-f1e514afdd08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2133&q=80');
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("/w3images/parallax2.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("/w3images/parallax3.jpg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}
</style>

<body>
   
<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar" id="myNavbar">
    <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
      <i class="fa fa-bars"></i>
    </a>
    
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
    <a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
    <a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
    <a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
    <a href="#" class="w3-bar-item w3-button">SEARCH</a>
  </div>
</div>

<a href="https://kodsozluk.com/" target="_blank">
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
  <div class="w3-display-middle" style="white-space:nowrap;">
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity"> <span class="w3-hide-small">Kodsozluk</span> </span>
  </div>
</div>
</a>

<!-- Container (About Section) -->



</body>
</html>

package.json dosyasında scriptin içine start komutunu yazın

 "scripts": {
        "start": "node index.js"
    },

Node uygulamanızın tarayıcıda local olarak çalıştığını görmek için aşağıdaki komutu çalıştırın

npm run start

Vercel'de deploy etme

Projenizin kök klasöründe olduğunuzdan emin olun ve ardından terminalinizde vercel komutunu çalıştırın.

Vercel ile kendi projenizi kurmak için aşağıdaki proje kurulum ayarlarını kılavuz olarak kullanın.

? Set up and deploy “~/Desktop/username/vercel-node-app”? [Y/n] y
? Which scope do you want to deploy to? username
? Link to existing project? [y/N] n
? What’s your project’s name? vercel-node-app
? In which directory is your code located? ./
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n

Bu tamamlandıktan sonra size bazı bağlantılar verecek. Uygulama henüz çalışmayacak, sadece size index.js dosyanızın içindeki kodu gösterecek. Bir vercel.json dosyası oluşturmanız ve Vercel'in bunun bir Node uygulaması olduğunu bilmesi için kök klasöre koymanız gerekir. Ve index.js dosyanızın proje için diğer sunucu tarafı kodunuzla birlikte kök klasörde kalması çok önemlidir, aksi takdirde uygulamanız çalışmaz.

Bir vercel.json dosyası oluşturun ve onu proje klasörünüzün kök dizinine koyun ve ardından aşağıdaki kodu ekleyin.

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

Şimdi uygulamanızı dağıtmak için vercel komutunu tekrar çalıştırın. Üretim bağlantısını açın ve uygulamanız tam çalışma yolları ile çevrimiçi çalışıyor olmalıdır.

Terminaldeki preview linkine tıklayın ve uygulamanız vercel ile deploy oldu.

canlı uygulama

Kaynak kodu