Αυτό το άρθρο εισάγει την έννοια του headless CMS, ενός συστήματος διαχείρισης περιεχομένου μόνο backend που επιτρέπει στους προγραμματιστές να δημιουργούν, να αποθηκεύουν, να διαχειρίζονται και να δημοσιεύουν το περιεχόμενο μέσω ενός API χρησιμοποιώντας τις λειτουργίες Fauna και Vercel. Αυτό βελτιώνει τη ροή εργασίας frontend-backend, που επιτρέπει στους προγραμματιστές να δημιουργήσουν γρήγορα εξαιρετική εμπειρία χρήστη.
Σε αυτό το σεμινάριο, θα μάθουμε και θα χρησιμοποιήσουμε χωρίς κεφαλές λειτουργίες CMS, Fauna και Vercel για να δημιουργήσουμε μια πλατφόρμα ιστολογίων, το Blogify🚀. Μετά από αυτό, μπορείτε εύκολα να δημιουργήσετε οποιαδήποτε εφαρμογή Ιστού χρησιμοποιώντας λειτουργίες χωρίς κεφαλή CMS, Fauna και Vercel.
Εισαγωγή
Σύμφωνα με DND, Ένα σύστημα διαχείρισης περιεχομένου (CMS) είναι ένα λογισμικό υπολογιστή που χρησιμοποιείται για τη διαχείριση της δημιουργίας και της τροποποίησης ψηφιακού περιεχομένου. Το CMS έχει συνήθως δύο βασικά στοιχεία: μια εφαρμογή διαχείρισης περιεχομένου (CMA), ως διεπαφή χρήστη διεπαφής που επιτρέπει σε έναν χρήστη, ακόμη και με περιορισμένη τεχνογνωσία, να προσθέτει, να τροποποιεί και να αφαιρεί περιεχόμενο από έναν ιστότοπο χωρίς την παρέμβαση webmaster. και μια εφαρμογή παράδοσης περιεχομένου (CDA), που συγκεντρώνει το περιεχόμενο και ενημερώνει τον ιστότοπο.
Τα πλεονεκτήματα και τα μειονεκτήματα του παραδοσιακού έναντι του κεφαλιού CMS
Η επιλογή μεταξύ αυτών των δύο μπορεί να είναι αρκετά μπερδεμένη και περίπλοκη. Αλλά και τα δύο έχουν πιθανά πλεονεκτήματα και μειονεκτήματα.
Παραδοσιακά Επαγγελματίες CMS
- Η ρύθμιση του περιεχομένου σας σε ένα παραδοσιακό CMS είναι πολύ πιο εύκολη καθώς όλα όσα χρειάζεστε (διαχείριση περιεχομένου, σχεδιασμός κ.λπ.) είναι διαθέσιμα σε εσάς.
- Πολλά παραδοσιακά CMS έχουν drag and drop, καθιστώντας εύκολο για ένα άτομο χωρίς εμπειρία προγραμματισμού να εργάζεται εύκολα μαζί τους. Διαθέτει επίσης υποστήριξη για εύκολη προσαρμογή με μηδενική έως μικρή γνώση κωδικοποίησης.
Παραδοσιακό CMS Μειονεκτήματα
- Τα πρόσθετα και τα θέματα στα οποία βασίζεται το παραδοσιακό CMS ενδέχεται να περιέχουν κακόβουλους κώδικες ή σφάλματα και να επιβραδύνουν την ταχύτητα του ιστότοπου ή του ιστολογίου.
- Η παραδοσιακή σύζευξη του μπροστινού και του πίσω μέρους θα απαιτούσε σίγουρα περισσότερο χρόνο και χρήμα για συντήρηση και προσαρμογή.
Headless CMS Pros
- Υπάρχει ευελιξία με την επιλογή του πλαισίου διεπαφής προς χρήση, καθώς το frontend και το backend είναι χωριστά το ένα από το άλλο, σας δίνει τη δυνατότητα να επιλέξετε ποια τεχνολογία frontend ταιριάζει στις ανάγκες σας. Δίνει την ελεύθερη βούληση να επιλέξετε τα εργαλεία που χρειάζονται για τη δημιουργία του frontend—ευελιξία κατά το στάδιο ανάπτυξης.
- Η ανάπτυξη λειτουργεί ευκολότερα με το CMS χωρίς κεφάλι. Οι εφαρμογές (ιστολόγια, ιστότοποι, κ.λπ.) που έχουν δημιουργηθεί με χωρίς κεφαλή CMS μπορούν εύκολα να αναπτυχθούν για να λειτουργήσουν σε διάφορες οθόνες, όπως συσκευές ιστού, κινητές συσκευές, συσκευές AR/VR.
Headless CMS Μειονεκτήματα
- Έχετε μείνει με τις ανησυχίες σχετικά με τη διαχείριση των υποδομών υποστήριξης, τη ρύθμιση του στοιχείου διεπαφής χρήστη του ιστότοπού σας, της εφαρμογής σας.
- Η εφαρμογή του χωρίς κεφαλή CMS είναι γνωστό ότι είναι πιο δαπανηρή έναντι του παραδοσιακού CMS. Η δημιουργία μιας εφαρμογής CMS χωρίς κεφάλι που ενσωματώνει αναλυτικά στοιχεία δεν είναι οικονομικά αποδοτική.
Πανίδα χρησιμοποιεί μια προϋπάρχουσα υποδομή για τη δημιουργία εφαρμογών ιστού χωρίς τη συνήθως εγκατάσταση ενός προσαρμοσμένου διακομιστή API. Αυτό βοηθά αποτελεσματικά στην εξοικονόμηση χρόνου για τους προγραμματιστές και στο άγχος της επιλογής περιοχών και της διαμόρφωσης του χώρου αποθήκευσης που υπάρχει μεταξύ άλλων βάσεων δεδομένων. που είναι παγκόσμια/πολυπεριοχή από προεπιλογή, δεν υπάρχουν με την Πανίδα. Όλη η συντήρηση που χρειαζόμαστε αναλαμβάνεται ενεργά από μηχανικούς και αυτοματοποιημένα DevOps στην Πανίδα. Θα χρησιμοποιήσουμε την Πανίδα ως δικό μας σύστημα διαχείρισης περιεχομένου μόνο backend.
Πλεονεκτήματα της χρήσης της πανίδας
- Η ευκολία χρήσης και δημιουργίας μιας παρουσίας βάσης δεδομένων Fauna μέσα από το περιβάλλον ανάπτυξης των πλατφορμών φιλοξενίας όπως το Netlify ή το Vercel.
- Μεγάλη υποστήριξη για την αναζήτηση δεδομένων μέσω GraphQL ή χρησιμοποιήστε τη γλώσσα ερωτημάτων της Fauna. Fauna Query Language (FQL), για πολύπλοκες συναρτήσεις.
- Πρόσβαση σε δεδομένα σε πολλά μοντέλα, συμπεριλαμβανομένων των σχεσιακών, εγγράφων, γραφημάτων και χρονικών.
- Δυνατότητες όπως ο ενσωματωμένος έλεγχος ταυτότητας, η διαφανής επεκτασιμότητα και η πολλαπλή μίσθωση είναι πλήρως διαθέσιμες στο Fauna.
- Το πρόσθετο μέσω του Fauna Console καθώς και του Fauna Shell διευκολύνει τη διαχείριση της παρουσίας της βάσης δεδομένων πολύ εύκολα.
Λειτουργίες Vercel, επίσης γνωστές ως Λειτουργίες χωρίς διακομιστή, σύμφωνα με το docs είναι κομμάτια κώδικα γραμμένα με γλώσσες υποστήριξης που λαμβάνουν ένα αίτημα HTTP και παρέχουν απάντηση.
Προϋποθέσεις
Για να επωφεληθείτε πλήρως από αυτό το σεμινάριο, βεβαιωθείτε ότι τα ακόλουθα εργαλεία είναι διαθέσιμα ή εγκατεστημένα στο περιβάλλον τοπικής ανάπτυξης:
- Πρόσβαση στον πίνακα ελέγχου Πανίδας
- Βασικές γνώσεις React και React Hooks
- Έχω
create-react-app
εγκατασταθεί ως καθολικό πακέτο ή χρησιμοποιήστε npx για την εκκίνηση του έργου. - Έκδοση Node.js >=
12.x.x
εγκατεστημένο στο τοπικό σας μηχάνημα. - Βεβαιωθείτε ότι
npm
oryarn
εγκαθίσταται επίσης ως διαχειριστής πακέτων
Ρύθμιση βάσης δεδομένων με πανίδα
Συνδεθείτε στον λογαριασμό σας για την πανίδα για να ξεκινήσετε με το Fauna ή πρώτα εγγράψτε έναν νέο λογαριασμό χρησιμοποιώντας είτε διαπιστευτήρια/λεπτομέρειες email είτε χρησιμοποιώντας έναν υπάρχοντα λογαριασμό Github ως νέο χρήστη. Μπορείτε να εγγραφείτε για νέο λογαριασμό εδώ. Μόλις δημιουργήσετε έναν νέο λογαριασμό ή συνδεθείτε, θα σας καλωσορίσει η οθόνη του πίνακα ελέγχου. Μπορούμε επίσης να χρησιμοποιήσουμε το κέλυφος πανίδας αν αγαπάτε το περιβάλλον του κελύφους. Σας επιτρέπει εύκολα να δημιουργήσετε
και/ή τροποποιήστε τους πόρους στην Πανίδα μέσω του τερματικού.
Χρησιμοποιώντας το κέλυφος της πανίδας, η εντολή είναι:
npm install --global fauna-shell
fauna cloud-login
Αλλά θα χρησιμοποιήσουμε τον ιστότοπο σε όλο αυτό το σεμινάριο. Μόλις συνδεθείτε, η οθόνη του πίνακα ελέγχου σας καλωσορίζει:
Τώρα είμαστε συνδεδεμένοι ή έχουμε δημιουργήσει τους λογαριασμούς μας, μπορούμε να προχωρήσουμε στη δημιουργία της Πανίδας μας. Θα ακολουθήσουμε τα παρακάτω απλά βήματα για να δημιουργήσουμε τη νέα βάση δεδομένων πανίδας χρησιμοποιώντας τις υπηρεσίες Πανίδας. Ξεκινάμε με την ονομασία της βάσης δεδομένων μας, την οποία θα χρησιμοποιήσουμε ως σύστημα διαχείρισης περιεχομένου. Σε αυτό το σεμινάριο, θα ονομάσουμε τη βάση δεδομένων μας blogify.
Με τη δημιουργία της βάσης δεδομένων, το επόμενο βήμα είναι να δημιουργήσετε μια νέα συλλογή δεδομένων από τον πίνακα ελέγχου της Πανίδας. Μεταβείτε στην καρτέλα Συλλογή στο πλαϊνό μενού και δημιουργήστε μια νέα συλλογή κάνοντας κλικ στο NEW COLLECTION
κουμπί.
Στη συνέχεια, θα προχωρήσουμε για να δώσουμε οποιοδήποτε όνομα ταιριάζει στη συλλογή μας. Εδώ θα το ονομάσουμε blogify_posts.
Το επόμενο βήμα για να ετοιμάσουμε τη βάση δεδομένων μας είναι να δημιουργήσουμε μια νέα index
. Πλοηγηθείτε στο Δείκτες καρτέλα για να δημιουργήσετε ένα ευρετήριο. Η αναζήτηση εγγράφων στην Πανίδα μπορεί να γίνει χρησιμοποιώντας indexes
, συγκεκριμένα με την αντιστοίχιση των εισροών με τα στοιχεία ενός ευρετηρίου terms
πεδίο. Κάνε κλικ στο NEW INDEX
κουμπί για να δημιουργήσετε ένα ευρετήριο. Μόλις μπείτε στην οθόνη δημιουργίας ευρετηρίου, συμπληρώστε τη φόρμα: επιλέγοντας τη συλλογή που δημιουργήσαμε προηγουμένως και, στη συνέχεια, δίνοντας ένα όνομα στο ευρετήριό μας. Σε αυτό το σεμινάριο, θα ονομάσουμε το δικό μας all_posts. Μπορούμε τώρα να αποθηκεύσουμε το ευρετήριό μας.
Μετά τη δημιουργία ενός ευρετηρίου, τώρα ήρθε η ώρα να δημιουργήσουμε το δικό μας ΕΓΓΡΑΦΟ, θα περιέχει τα περιεχόμενα/δεδομένα που θέλουμε να χρησιμοποιήσουμε για τον ιστότοπο CMS μας. Κάνε κλικ στο NEW DOCUMENT
κουμπί για να ξεκινήσετε. Με το πρόγραμμα επεξεργασίας κειμένου για τη δημιουργία του εγγράφου μας, θα δημιουργήσουμε δεδομένα αντικειμένου για να εξυπηρετήσουμε τις ανάγκες μας για τον ιστότοπο.
Τα παραπάνω post
Το αντικείμενο αντιπροσωπεύει τα δεδομένα μονάδας που χρειαζόμαστε για να δημιουργήσουμε την ανάρτηση ιστολογίου μας. Η επιλογή των δεδομένων σας μπορεί να είναι τόσο διαφορετική από αυτή που έχουμε εδώ, εξυπηρετώντας τον σκοπό για όποιον θέλετε μέσα στον ιστότοπό σας. Μπορείτε να δημιουργήσετε όσα έγγραφα μπορεί να χρειαστείτε για τον ιστότοπό σας CMS. Για να κρατήσουμε τα πράγματα απλά, έχουμε μόνο τρεις αναρτήσεις ιστολογίου.
Τώρα που έχουμε ολοκληρώσει τη ρύθμιση της βάσης δεδομένων μας σύμφωνα με την επιλογή μας, μπορούμε να προχωρήσουμε στη δημιουργία της εφαρμογής React, της διεπαφής.
Δημιουργήστε μια νέα εφαρμογή React και εγκαταστήστε εξαρτήσεις
Για την ανάπτυξη του frontend, θα χρειαστούμε εξαρτήσεις όπως π.χ Fauna SDK
, styled-components
και vercel
στην εφαρμογή μας React. Θα χρησιμοποιήσουμε το styled-components
για το στυλ διεπαφής χρήστη, χρησιμοποιήστε το vercel
εντός του τερματικού μας για να φιλοξενήσει την εφαρμογή μας. ο Fauna SDK
θα χρησιμοποιηθεί για την πρόσβαση στο περιεχόμενό μας στη βάση δεδομένων που είχαμε εγκαταστήσει. Μπορείτε πάντα να αντικαταστήσετε το styled-components
για οποιαδήποτε βιβλιοθήκη αποφασίσετε να χρησιμοποιήσετε για το στυλ διεπαφής χρήστη σας. Χρησιμοποιήστε επίσης οποιοδήποτε πλαίσιο διεπαφής χρήστη ή βιβλιοθήκη προτιμάτε από άλλα.
npx create-react-app blogify
# install dependencies once directory is done/created
yarn add fauna styled-components
# install vercel globally
yarn global add vercel
Η fauna
Το πακέτο είναι πρόγραμμα οδήγησης JavaScript Fauna για Fauna. Η βιβλιοθήκη styled-components
σας επιτρέπει να γράψετε πραγματικό κώδικα CSS για το στυλ των στοιχείων σας. Μόλις ολοκληρωθεί η εγκατάσταση για τις εξαρτήσεις του έργου, ελέγξτε το package.json
αρχείο για να επιβεβαιώσετε ότι ολοκληρώθηκε η εγκατάσταση
επιτυχώς.
Τώρα ας ξεκινήσουμε μια πραγματική κατασκευή της διεπαφής χρήστη του ιστότοπου του ιστολογίου μας. Θα ξεκινήσουμε με την ενότητα κεφαλίδας. Θα δημιουργήσουμε ένα Navigation
συστατικό εντός του components
φάκελο μέσα στο src
ντοσιέ, src/components
, για να περιέχει το όνομα του ιστολογίου μας, Blogify🚀.
import styled from "styled-components";
function Navigation() { return ( <Wrapper> <h1>Blogify🚀</h1> </Wrapper> );
}
const Wrapper = styled.div` background-color: #23001e; color: #f3e0ec; padding: 1.5rem 5rem; & > h1 { margin: 0px; }
`;
export default Navigation;
Αφού εισαχθεί εντός του App
εξαρτήματα, ο παραπάνω κώδικας σε συνδυασμό με τα styling μέσω του styled-components
βιβλιοθήκης, θα μοιάζει με την παρακάτω διεπαφή χρήστη:
Τώρα είναι ώρα να δημιουργήσετε το σώμα της ιστοσελίδας, που θα περιέχει το post
δεδομένα από τη βάση δεδομένων μας. Δομίζουμε ένα στοιχείο, που ονομάζεται Αναρτήσεις, το οποίο θα περιέχει τις αναρτήσεις του ιστολογίου μας που έχουν δημιουργηθεί στο backend.
import styled from "styled-components";
function Posts() { return ( <Wrapper> <h3>My Recent Articles</h3> <div className="container"></div> </Wrapper> );
}
const Wrapper = styled.div` margin-top: 3rem; padding-left: 5rem; color: #23001e; & > .container { display: flex; flex-wrap: wrap; } & > .container > div { width: 50%; padding: 1rem; border: 2px dotted #ca9ce1; margin-bottom: 1rem; border-radius: 0.2rem; } & > .container > div > h4 { margin: 0px 0px 5px 0px; } & > .container > div > button { padding: 0.4rem 0.5rem; border: 1px solid #f2befc; border-radius: 0.35rem; background-color: #23001e; color: #ffffff; font-weight: medium; margin-top: 1rem; cursor: pointer; } & > .container > div > article { margin-top: 1rem; }
`;
export default Posts;
Ο παραπάνω κώδικας περιέχει στυλ για JSX που θα συνεχίσουμε να δημιουργούμε μόλις αρχίσουμε να αναζητούμε δεδομένα από το backend στο frontend.
Ενσωματώστε το Fauna SDK στην εφαρμογή μας React
Για να ενσωματώσετε το fauna
πελάτη με την εφαρμογή React, πρέπει να κάνετε μια αρχική σύνδεση από την εφαρμογή. Δημιουργήστε ένα νέο αρχείο db.js
στη διαδρομή καταλόγου src/config/
. Στη συνέχεια εισάγετε το fauna
πρόγραμμα οδήγησης και ορίστε έναν νέο πελάτη.
Η secret
πέρασε ως επιχείρημα στο fauna.Client()
μέθοδος πρόκειται να κρατήσει το κλειδί πρόσβασης από .env
αρχείο:
import fauna from 'fauna';
const client = new fauna.Client({ secret: process.env.REACT_APP_DB_KEY,
});
const q = fauna.query;
export { client, q };
Μέσα από το Posts
συστατικό δημιουργεί μια μεταβλητή κατάστασης που ονομάζεται posts
χρησιμοποιώντας useState
React Hooks με μια προεπιλεγμένη τιμή ενός πίνακα. Θα αποθηκεύσει την αξία του περιεχομένου που θα λάβουμε πίσω από τη βάση δεδομένων μας χρησιμοποιώντας το setPosts
λειτουργία. Στη συνέχεια, ορίστε μια δεύτερη μεταβλητή κατάστασης, visible
, με προεπιλεγμένη τιμή false
, που θα χρησιμοποιήσουμε για να αποκρύψουμε ή να εμφανίσουμε περισσότερο περιεχόμενο ανάρτησης χρησιμοποιώντας το handleDisplay
λειτουργία που θα ενεργοποιηθεί από ένα κουμπί που θα προσθέσουμε αργότερα στο σεμινάριο.
function App() { const [posts, setPosts] = useState([]); const [visible, setVisibility] = useState(false); const handleDisplay = () => setVisibility(!visible); // ...
}
Δημιουργία λειτουργίας χωρίς διακομιστή γράφοντας ερωτήματα
Δεδομένου ότι ο ιστότοπος του ιστολογίου μας πρόκειται να εκτελέσει μόνο μία λειτουργία, δηλαδή να λάβουμε τα δεδομένα/περιεχόμενα που δημιουργήσαμε στη βάση δεδομένων, ας δημιουργήσουμε έναν νέο κατάλογο που ονομάζεται src/api/
και μέσα σε αυτό, δημιουργούμε ένα νέο αρχείο που ονομάζεται index.js
. Κάνοντας το αίτημα με το ES6, θα χρησιμοποιήσουμε import
για να εισαγάγετε το client
και την query
παράδειγμα από το config/db.js
αρχείο:
export const getAllPosts = client .query(q.Paginate(q.Match(q.Ref('indexes/all_posts')))) .then(response => { const expenseRef = response.data; const getAllDataQuery = expenseRef.map(ref => { return q.Get(ref); }); return client.query(getAllDataQuery).then(data => data); }) .catch(error => console.error('Error: ', error.message));
}) .catch(error => console.error('Error: ', error.message));
Το παραπάνω ερώτημα στη βάση δεδομένων θα επιστρέψει α ref
που μπορούμε να αντιστοιχίσουμε για να λάβουμε τα πραγματικά αποτελέσματα που χρειάζονται για την εφαρμογή. Θα φροντίσουμε να προσαρτήσουμε το catch
που θα βοηθήσει στον έλεγχο για κάποιο σφάλμα κατά την υποβολή ερωτημάτων στη βάση δεδομένων, ώστε να μπορούμε να την αποσυνδεθούμε.
Στη συνέχεια θα εμφανιστούν όλα τα δεδομένα που επιστρέφονται από το CMS, τη βάση δεδομένων μας—από τη συλλογή Πανίδα. Θα το κάνουμε επικαλούμενοι το ερώτημα getAllPosts
από το ./api/index.js
αρχείο στο εσωτερικό του useEffect
Γάντζος μέσα μας Posts
συστατικό. Αυτό συμβαίνει γιατί όταν το Posts
Το στοιχείο αποδίδει για πρώτη φορά, επαναλαμβάνει τα δεδομένα, ελέγχοντας εάν υπάρχει κάποια ανάρτηση στη βάση δεδομένων:
useEffect(() => { getAllPosts.then((res) => { setPosts(res); console.log(res); });
}, []);
Ανοίξτε την κονσόλα του προγράμματος περιήγησης για να επιθεωρήσετε τα δεδομένα που επιστρέφονται από τη βάση δεδομένων. Εάν όλα είναι σωστά και παρακολουθείτε προσεκτικά, τα δεδομένα επιστροφής θα πρέπει να μοιάζουν με τα παρακάτω:
Με αυτά τα δεδομένα που επιστράφηκαν με επιτυχία από τη βάση δεδομένων, μπορούμε πλέον να ολοκληρώσουμε το δικό μας Posts
στοιχεία, προσθέτοντας όλα τα απαραίτητα στοιχεία JSX που έχουμε διαμορφώσει χρησιμοποιώντας styled-components
βιβλιοθήκη. Θα χρησιμοποιήσουμε JavaScript map
να κάνει βρόχο πάνω από το posts
κατάσταση, πίνακας, μόνο όταν ο πίνακας δεν είναι κενός:
import { useEffect, useState } from "react";
import styled from "styled-components";
import { getAllPosts } from "../api"; function Posts() { useEffect(() => { getAllPosts.then((res) => { setPosts(res); console.log(res); }); }, []); const [posts, setPosts] = useState([]); const [visible, setVisibility] = useState(false); const handleDisplay = () => setVisibility(!visible); return ( <Wrapper> <h3>My Recent Articles</h3> <div className="container"> {posts && posts.map((post) => ( <div key={post.ref.id} id={post.ref.id}> <h4>{post.data.post.title}</h4> <em>{post.data.post.date}</em> <article> {post.data.post.mainContent} <p style={{ display: visible ? "block" : "none" }}> {post.data.post.subContent} </p> </article> <button onClick={handleDisplay}> {visible ? "Show less" : "Show more"} </button> </div> ))} </div> </Wrapper> );
} const Wrapper = styled.div` margin-top: 3rem; padding-left: 5rem; color: #23001e; & > .container { display: flex; flex-wrap: wrap; } & > .container > div { width: 50%; padding: 1rem; border: 2px dotted #ca9ce1; margin-bottom: 1rem; border-radius: 0.2rem; } & > .container > div > h4 { margin: 0px 0px 5px 0px; } & > .container > div > button { padding: 0.4rem 0.5rem; border: 1px solid #f2befc; border-radius: 0.35rem; background-color: #23001e; color: #ffffff; font-weight: medium; margin-top: 1rem; cursor: pointer; } & > .container > div > article { margin-top: 1rem; }
`; export default Posts;
Με την πλήρη δομή κώδικα παραπάνω, ο ιστότοπος του ιστολογίου μας, Blogify🚀, θα μοιάζει με την παρακάτω διεπαφή χρήστη:
Ανάπτυξη στο Vercel
Vercel CLI παρέχει ένα σύνολο εντολών που σας επιτρέπουν να αναπτύξετε και να διαχειριστείτε τα έργα σας. Τα παρακάτω βήματα θα φιλοξενήσουν το έργο σας από το τερματικό σας στην πλατφόρμα vercel γρήγορα και εύκολα:
vercel login
Ακολουθήστε τις οδηγίες για να συνδεθείτε στον λογαριασμό σας vercel στο τερματικό
vercel
Χρήση του vercel
εντολή από τη ρίζα ενός καταλόγου έργου. Αυτό θα προκαλέσει ερωτήσεις στις οποίες θα δώσουμε απαντήσεις ανάλογα με το τι ζητείται.
vercel
? Set up and deploy “~/Projects/JavaScript/React JS/blogify”? [Y/n] ? Which scope do you want to deploy to? ikehakinyemi
? Link to existing project? [y/N] n
? What’s your project’s name? (blogify) # click enter if you don't want to change the name of the project
? In which directory is your code located? ./ # click enter if you running this deployment from root directory
? ? Want to override the settings? [y/N] n
Αυτό θα αναπτύξει το έργο σας στο vercel. Επισκεφτείτε τον λογαριασμό σας vercel για να ολοκληρώσετε οποιαδήποτε άλλη ρύθμιση που απαιτείται για σκοπούς CI/CD.
Συμπέρασμα
Χαίρομαι που ακολουθήσατε το σεμινάριο μέχρι αυτό το σημείο, ελπίζω να έχετε μάθει πώς να χρησιμοποιείτε το Fauna ως Headless CMS. Ο συνδυασμός της Fauna με τις έννοιες Headless CMS μπορείτε να δημιουργήσετε μια εξαιρετική διαδικτυακή εφαρμογή, από εφαρμογή ηλεκτρονικού εμπορίου έως εφαρμογή διατήρησης σημειώσεων, οποιαδήποτε εφαρμογή web που χρειάζεται δεδομένα για αποθήκευση και ανάκτηση για χρήση στο frontend. Εδώ είναι το Σύνδεσμος GitHub για το δείγμα κώδικα που χρησιμοποιήσαμε στο σεμινάριο μας, και το ζωντανή επίδειξη που φιλοξενείται στο vercel.
Σχετικοί πόροι
Πηγή: https://css-tricks.com/building-a-headless-cms-with-fauna-and-vercel-functions/
- '
- "
- &
- 11
- 7
- 9
- 98
- πρόσβαση
- Λογαριασμός
- Πλεονέκτημα
- Όλα
- μεταξύ των
- analytics
- api
- app
- Εφαρμογή
- εφαρμογές
- άρθρο
- Πιστοποίηση
- Αυτοματοποιημένη
- Πίσω μέρος
- Μπλοκ
- Μηνύματα Blog
- Blogging
- ιστολόγια
- σώμα
- σύνορο
- σφάλματα
- χτίζω
- Κτίριο
- κλήση
- ο οποίος
- αλλαγή
- έλεγχος
- κωδικός
- Κωδικοποίηση
- συστατικό
- Λογισμικό υπολογιστή
- Δοχείο
- περιεχόμενο
- διαχείρισης περιεχομένου
- περιεχόμενα
- δημιουργία
- ταμπλό
- ημερομηνία
- βάση δεδομένων
- βάσεις δεδομένων
- διανομή
- Υπηρεσίες
- προγραμματιστές
- Ανάπτυξη
- Συσκευές
- DevOps
- ψηφιακό
- έγγραφα
- οδηγός
- Πτώση
- e-commerce
- συντάκτης
- ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
- Μηχανικοί
- Περιβάλλον
- κ.λπ.
- εξαγωγή
- FAST
- Όνομα
- πρώτη φορά
- Ευελιξία
- μορφή
- Πλαίσιο
- πλήρη
- λειτουργία
- GitHub
- Δίνοντας
- Παγκόσμιο
- γράφημα
- εξαιρετική
- εδώ
- Κρύβω
- κρατήστε
- φιλοξενία
- Πως
- Πώς να
- HTTPS
- Συμπεριλαμβανομένου
- ευρετήριο
- Υποδομή
- IT
- το JavaScript
- τήρηση
- Κλειδί
- γνώση
- Γλώσσα
- ΜΑΘΑΊΝΩ
- Βιβλιοθήκη
- Περιωρισμένος
- LINK
- τοπικός
- αγάπη
- μεγάλες
- Κατασκευή
- διαχείριση
- χάρτη
- medium
- Κινητό
- κινητές συσκευές
- χρήματα
- μετακινήσετε
- Πλοήγηση
- ΑΛΛΑ
- Άλλα
- πλατφόρμες
- Πλατφόρμες
- Plugins
- Δημοσιεύσεις
- Προγραμματισμός
- σχέδιο
- έργα
- δημοσιεύει
- Αντίδραση
- Υποστηρικτικό υλικό
- απάντησης
- Αποτελέσματα
- τρέξιμο
- Απεριόριστες δυνατότητες
- Οθόνη
- SDK
- Χωρίς διακομιστή
- Υπηρεσίες
- εξυπηρετούν
- σειρά
- τον καθορισμό
- κέλυφος
- Απλούς
- So
- λογισμικό
- ταχύτητα
- Στάδιο
- Εκκίνηση
- ξεκίνησε
- Κατάσταση
- χώρος στο δίσκο
- κατάστημα
- στρες
- υποστήριξη
- σύστημα
- Τεχνολογία
- ώρα
- φροντιστήριο
- ui
- ενημερώσεις
- αξία
- ιστός
- εφαρμογές ιστού
- Ιστοσελίδα : www.example.gr
- ιστοσελίδες
- Wikipedia
- εντός
- Εργασία
- ροής εργασίας
- λειτουργεί
- γραφή
- X
- μηδέν