bin/webpack-dev-server: Permission denied 解決

John Hsu
4 min readMay 10, 2021

--

今天是開始專注於專案的第一天,結果第一天就搞死人。

在五倍課程的一開始,龍哥就有提過檔案模式/權限的設定問題,結果今天就立刻遇到這個問題:

$ foreman s

產生錯誤:

/.rvm/gems/ruby-2.7.2/gems/foreman-0.87.2/lib/foreman/process.rb:54:in `spawn': Permission denied - bin/rails (Errno::EACCES)

由於是在 foreman 上出錯,所以回去檢查兩個有被呼叫的指令,發現原因是出在 webpack 上

$ bin/webpack-dev-server-bash: bin/webpack-dev-server: Permission denied

查找了網路上多數文件,通常會建議使用者更新 webpack 套件,所以我就移除了又裝~ 裝了又移除~ 這個也裝裝~ 那個也更新~ 最後還是沒辦法解決。

就在此時!救世主龍哥出現,一語驚醒夢中人,這不就是那個當初學的時候覺得自己絕對不可能遇到於是就把筆記給默默收好的那個段落。立刻來複習一下。

由於錯誤訊息是 bin 資料夾底下的權限出了問題,事不宜遲立刻移過去看看,到資料夾底下之後可以執行 $ ls -al 查看資料夾內檔案的詳細訊息。

可以看到前面的部分顯示了一些似曾相識英文字,其實那個就是在顯示不同使用者得到的權限,總共可以分三組:第一個英文字母顯示是否為資料夾,後面以三個英文字/ - 字號為一組分別顯示 user, group, others 的權限

其中的符號/英文字母代表的意義:

上圖列出的數字是只要快速進權限修改的時候可以使用。

修改時可利用 $ chmod (change mode) 指令進行

修改的詳細規則可另外查閱相關文件,最常用到的就是直接更改某個檔案的權限,修改方式為 $ chmod + 權限敘述 + 欲修改的檔案有以下幾種:
( 以下以要修改 testfile.txt 這個檔案權限為例)

  1. 直接以三個數字組合進行修改
    例:741 = user(4+2+1) group(4+0+0) others(0+0+1)
    執行 $ chmod 741 testfile.txt
  2. 全部列出
    例: $ chmod u=rwx,g=rx,o=r testfile.txt
  3. 個別列出
    例: $ chmod u+x testfile.txt (將 user 加入執行權限)
    例: $ chmod u-x testfile.txt (將 user 刪除執行權限)
  4. 全部套用相同權限
    例: $ chmod +x testfile.txt (將所有類別都加入執行權限)
  5. 選取資料夾底下的所有檔案
    例: $ chmod +x * ( “ * ” 代表選擇目前所在資料夾底下的所有檔案)

根據龍哥的經驗,用 windows 電腦建立出來推上 GitHub 的 rails 專案比較容易遇到這種問題,下次遇到就不用再卡這麼久了。

最後的解決方法是:

  1. $ cd bin 移動到疑似出問題的資料夾
  2. $ ls -al 檢查檔案狀態
  3. $ chmod +x * 修改權限

此時可以用 $ git status 檢查是否有未 commit 的檔案,如果有的話代表修改權限也會被 git 偵測到,可以推到團隊專案 repo 上讓所有人進行得更順利。

經一事長一智,之前真的都沒想到會有這種狀況發生,未來應該都忘不掉這個可怕的經驗了吧.... 幾乎整個下午都耗在那裏。

如果有打錯或需要補充的部分再麻煩有緣人跟我說~

--

--

John Hsu

站在全端工程師新手村邊界的冒險者,希望盡量用中文寫作,偶爾穿插英文,為其他程式新手降低進入障礙,也為中文社群盡一份心力。