Ubuntu 服务器从零部署 Vue 项目详细过程 前言

毕设准备做个前后端分离的 web 项目，前端采用 Vue.js 框架编写，后台采用 Golang 的 go-zero框架搞定。从腾讯云买了个云服务器，系统选择 Ubuntu18，下面是配置环境的全部过程。

安装 node.js

在官网 https://nodejs.org/en/download/ 找到 Linux 版本

右键复制下载连接，打开 ubuntu 命令行，由于 wget 下载较慢，先下个 axel 加速器：

sudo apt-get install axel

axel 下载链接
axel https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz

然后解压和移动：

tar -xvf node-v14.16.0-linux-x64.tar.xz
mv node-v14.16.0-linux-x64 /usr/local/nodejs

vim /etc/profile
export PATH=/usr/local/nodejs/bin:$PATH

source /etc/profile
安装 Vue CLI 脚手架 
npm install -g @vue/cli
安装 Nginx

确认 gcc 已安装

gcc -v

安装 openssl 依赖

sudo apt-get install openssl libssl-dev

安装 pcre 依赖

sudo apt-get install libpcre3 libpcre3-dev

安装 zlib 依赖

sudo apt-get install zlib1g-dev

安装 Nginx

先下载压缩包：

axel http://nginx.org/download/nginx-1.9.9.tar.gz

/usr/local/backend
tar -zxvf nginx-1.9.9.tar.gz -C /usr/local/backend

进入 /usr/local/backend/nginx-1.9.9 ，执行以下几个命令：

./configure
make
make install

apt upgrade gcc

make install 可能出现编译错误：

这是因为 cc1 下所有的警告都被当成错误，因此需要忽略这些警告。解决步骤：

  1. 进入 nginx-1.9.9/objs，修改其中的 Makefile 文件
vim nginx-1.9.9/objs/Makefile

删掉 CFLAG 这一行后面的 -Werror，保存退出:

  1. 编辑 nginx-1.9.9/src/os/unix/ngx_user.c，将 #ifdef_GLIBC 与 #endif 之间的内容注释掉：

完成，回到解压目录再执行 make install 即可。

成功后在 /usr/local 目录下就有了 nginx 文件夹，执行：

cd usr/local/nginx/sbin
./nginx
ps -ef | grep nginx

然后访问 ip 地址：

证明 nginx 安装成功。

部署 Vue 项目

由于我买的服务器性能一般，所以我将项目在本地编译，然后将产物传到服务器上。

在 Vue 项目目录下执行 npm run build ，然后试图将文件夹 dist 下的产物传输到服务器上，这里我才用 xshell + xftp 的方式传输。这两个软件直接在百度搜索下载即可，没有啥坑，下载好之后先打开 xshell，连接到服务器:

然后右键左边的会话，选择用 xftp 打开，然后把dist目录下的文件全部拖到 nginx/html 即可。

这个过程中可能会提示 permission is not allowed，将 html 文件夹权限设置为 777 即可：

sudo chmod 777 文件夹名