手把手教你部署前端项目

手把手教你部署前端项目

1.1 用Vue-cli构建简易前端项目

1.1.1 安装 Vue CLI 包

打开命令行工具，执行下列命令来安装 Vue CLI 包：

npm install -g @vue/cli

可以用下面的命令查看是否安装成功：

vue --version

1.1.2 创建一个项目

新建一个文件夹，命名为simple-website，在simple-website下运行以下命令来创建项目：

vue create frontend

全部选择默认配置即可，
这个过程可能需要几分钟，请耐心等待。

1.1.3 打包项目

在simple-website/frontend目录下执行：

npm run build

1.2 登录服务器，把打包后的文件放入对应目录

如果没有购买服务器，可以把自己电脑当做服务器，可跳过该小节。

如果有购买服务器的话，登录服务器：

ssh -l root xxx.xx.xx.xxx

切换到服务器的home目录下，并新建文件夹simeple-website-frontend：

cd /home
mkdir simple-website-frontend

在本地的simple-website/frontend/dist目录下执行如下命令，把打包生成的文件放入服务器对应目录下：

scp -r ./* root@120.76.53.100:/home/simple-website-frontend

1.3 服务器端nginx的安装、配置、启动

1.3.1 nginx安装

在服务器端执行：

sudo su root
apt-get install nginx

查看nginx是否安装成功:

nginx -v

如果安装过程中报错Unable to locate package nginx，先执行sudo apt-get update，再执行sudo apt-get install nginx。

1.3.2 修改nginx配置文件

nginx安装成功后的位置如下:

/usr/sbin/nginx：主程序
/etc/nginx：配置文件所在路径
/usr/share/nginx：静态文件所在路径
/var/log/nginx：日志文件所在路径

修改配置文件/etc/nginx/nginx.conf的部分内容，在http中增加server如下：

http {
    server {
        listen       8080;
        server_name  localhost;

        location / {
            root   /home/simple-website-frontend;
            index  index.html index.htm;
        }

 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

注意：如果是自己电脑作为服务器，root改为前端npm run build后生成的dist文件夹。

1.3.3 nginx服务启动

nginx -t // 检验配置是否正确
nginx -s reload // 重新加载修改的配置
service nginx restart // 重新启动

之后，访问http://xxx.xxx.xxx.xxx:8080/，成功啦。