云服务器安装nginx 部署vue静态项目

首先使用putty连接云服务器。


云服务器安装nginx 部署vue静态项目_第1张图片
putty

使用putty在Host Name中输入自己云服务器的公有ip地址,按上图输入选择完之后进入输入用户名和密码(用户名一般为root,密码是自己设置的)。

Welcome to Alibaba Cloud Elastic Compute Service !

显示上述文字时,表示成功进入!

一、nginx配置

1.安装

yum install nginx -y

2.启动

nginx

之后可以在网址输入云服务器ip或绑定的域名,可以看到nginx的测试页面。


云服务器安装nginx 部署vue静态项目_第2张图片
nginx

3.修改访问路径

修改前端资源文件的路径才能通过url去访问服务器上的资源文件。
以下操作是使用fileZilla下载后本地修改完成后上传覆盖的(因为命令行的不太熟)

首先nginx默认配置文件地址为 /etc/nginx/nginx.conf 。将文件中的 root /usr/share/nginx/html 修改为: root /data/www 。(之后会把文件放在这个目录下)

云服务器安装nginx 部署vue静态项目_第3张图片
nginx.conf

4.重启nginx

nginx -s reload

5.在/data文件夹下新建www文件夹

mkdir -p /data/www

当然也可以用fileZilla进行界面操作(右击创建目录,取名www)

6.上传vue打出来的包

云服务器安装nginx 部署vue静态项目_第4张图片
目录结构如上

输入域名就可以看到效果了。

你可能感兴趣的