iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 29

【D29 - 用Vue實作網頁】佈署你的專案,分享給朋友你的第一個網站!!

今天是距離完賽倒數一天了,我們也準備要把我們之前三十天努力的心血deploy到網路上!!

前言

我們每當做了一個網站,如果你希望大家可以使用到你的網站的話,我們就需要把這個資料夾部署到伺服器上面,並提供一個網址讓所有人都可以去造訪,vue有幾個比較推薦的免費部署方法

  • gihub
  • gitlab
  • firebase
  • Netlify

我這邊提到一個重點就是免費,因為其實大多數的網域都是要錢的,對於一個公司每個月花不少錢在網域上和雲端儲存上都是很正常的~ 但我們這個網站只是自己練習用,不在異流量的問題,所以可以用免費的部署方法


Firebase Hosting

我們這次就選擇使用firebase hosting 吧~ 前提是你之前有跟著一起開過firebase專案,也擁有一個firebase account。那我們現在就到我們的專案去看一下:
https://ithelp.ithome.com.tw/upload/images/20200929/20129730MVuIJ5j24x.jpg

回到專案安裝

接下來我們回到專案,在我們要使用到firebase之前,我們邀先安裝firebase cli,一個包裝包含了deploy的功能(之前應該也裝過,但在確認一次)

npm install -g firebase-tools

首先我們要先連到我們的firebase account,所以要先login

firebase login

https://ithelp.ithome.com.tw/upload/images/20200929/20129730GNiJlNDfqT.jpg
https://ithelp.ithome.com.tw/upload/images/20200929/20129730qF87ZrZuLS.jpg

初始化

然後就可以開起專案

firebase init

他會問你要使用哪一個firebase project,這邊就選擇30-days-challange,然後他就會開始問你一堆問題
https://ithelp.ithome.com.tw/upload/images/20200929/20129730qFxJOmXMpp.jpg

  • CLI 我們只要選擇firestrore就可以了~
  • 他問你的都直接yes到底

更改位置

因為我們是vue project,之後deploy就會把東西丟到一個叫做dist的資料夾,而不是原有的public,所以我們需要更動一下位置

// firebase.json
{
  "hosting": {
    "public": "dist"
  }
}

一頁式專案

我們要在single-page app選擇YES,之後他就會建立一個index.html在dist裡面

// firebase.json
{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

npm run build

這行指令就可以讓你順利地建立起這份專案,你會看到多了一個dist檔案夾
https://ithelp.ithome.com.tw/upload/images/20200929/20129730gmOrgLNYiC.jpg

firebase deploy

firebase deploy

輸入之後就可以順利建立成功,他也會給你一個預設的網址,輸入網址之後就會看到我們的網頁啦~
https://ithelp.ithome.com.tw/upload/images/20200929/20129730rlrxyrZGv0.jpg


後記

之後如果要改domain name(網址名稱)或是維護我們的網站,可以到firebase console裡面去看
https://ithelp.ithome.com.tw/upload/images/20200929/20129730n9HnVPLaE3.jpg

那恭喜各位就成功的把網頁部署到網路上啦~ 現在終於可以跟大家說你30天學到甚麼了嗚嗚

明天會做一個最後的復習,明天見~
/images/emoticon/emoticon58.gif


上一篇
【D28 - 用Vue實作網頁】postman是哪個男人?要怎麼用他(羞)!?
下一篇
【D30 - 期待與各位再次見面】前端學到暈島隆重閉幕!
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言