Giter VIP home page Giter VIP logo

shorturl's Introduction

ShortUrl

A serverless URL shortening service based on Vercel.
本页还提供:简体中文版

🎉 Features

  • serverless
  • Automatically prevent duplicate short URLs from being generated
  • Background management page
    • Add short URL
    • list of short urls
    • remove short url
  • Companion API
  • Secondary development possible

😎 Demo

Link:https://go.muna.uk/eXw8n

image

😜 deploy

First part

Apply for Mongodb database

Video version: The first chapter on Youtube/Bilibili

Because the short link service needs to store URL data, it is necessary to apply for a free Mongodb database from Mongodb.com for data storage.

In this section, you will get a Mongodb url, please save it, we will use it in the next section.

Open https://account.mongodb.com/account/register to register an account image image image image

Create a database account and record the password of the account

image

Authorize all IP connections

image

create

image

image

Click this option

image

Copy the connection URL

image

Replace the "" in the URL with the password you just set

image


The second part

Video version: The second chapter on Youtube/Bilibili

1. Deploy the repository to Vercel:

You need to click the button below to go to the Vercel deployment page

Vercel

If you have not logged in or registered Vercel, please click the deployment button above again after registering/logging in according to the page.

If everything is ready, you will see the following page after clicking the button: image You need to give your project a name, fill it in the "Repository Name" input box, and click the "Create" button,

image

At that time Vercel will automatically create a repository with the same name in your Github and pull the code of this project.

image

After the pull is complete, Vercel will start project deployment, which is also automatic.

image

When you see this page, the project has been deployed successfully. image

2. Add environment variables

After the deployment is complete, you need to click the "Continue to Dashboard" button located in the upper right corner of the page image

If you accidentally close this button, you only need to open the item on the homepage. In the new page, click the "Settings" button in the menu bar

image Click the "Environment Variables" button to open the environment variable settings page image On the environment variable setting page, create new environment variables named "AdminSession" and "mongodbUrl" according to the figure below, and write the administrator login credentials and mongodbUrl (obtained in step 1) respectively. Also check the "Production", "Preview" and "Development" options below. Finally click the "Save" button to save image We need to click the "Deployments" button in the navigation bar to open the deployment tab image Click the "Redeploy" button in the "..." button to the right of the first record to redeploy the project image Check "Redeploy with existing Build Cache." and click the "REDEPLOY" button to redeploy image When you see this page, the service has been successfully deployed image You can access the domain name +/admin to access the management page, and the login password is the value of "AdminSession" in the environment variable you set. image If you need a custom domain name, you can bind it yourself on the settings page

shorturl's People

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.