vuepress项目上线到阿里云轻量服务器并配置Nginx服务器的经历

2,698 阅读3分钟

首先,买一台服务器是必要的,我使用的是阿里云LAMP 6.1.0位操作系统。
在整个vuepress 部署到服务器上 遇到的一些问题,在此记录。

遇到的问题:

  • 服务器连接

  • nginx安装配置

  • 部署上去后路径无法访问

一、使用xshell连接服务器

1、可以到官网购买也可以填写家庭和学校用户的免费许可证的版本以下是链接

     www.netsarang.com/zh/free-for…

     填写好后可以直接就可以下载

2、建立连接

注意: 上方服务器ip为公网ip

填写好ip后 填写自己设置好的账号(一般情况是root) 密码就可以进入如下页面

二、vuepress项目打包上线 当我们在本地完成项目开发,可以成功访问项目页面时,运行 npm run build:docs 命令

1、注意:设置 当前部署站点的基础路径为/

2、 把本地打包好的文件放到服务器中,我是放到opt目录下

当我们按照上面步骤打包上线后,访问公网ip,是没法看到页面的。这是因为我们不可能通过一台电脑的ip就去访问电脑的文件。所以我们还需要配置服务器代理,我是通过配置nginx实现的,除了nginx还有其他很多服务器也可以实现。如apache等。

三、nginx安装配置

1、在Xshell终端,也就是命令行窗口,输入命令

 yum install nginx

 当需要确认时输入”y“回车。 安装完成后,

2、通过命令 

nginx -t

  查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下

3、输入 启动nginx服务

sudo nginx -c /etc/nginx/nginx.conf

   /etc/nginx/nginx.conf 为默认安装位置

4、如果启动过程中出现如图所示

可以使用  sudo fuser -k 80/tcp释放 后再次启动nginx服务

5、在命令行输入命令 cd /etc/nginx 切换到nginx目录下,再输入 cat nginx.conf 可查看当前nginx配置文件。

6、在nginx目录下,输入 vim nginx.conf 进入nginx配置编辑模式,然后按键盘 i 键,当命令行左下角出现-- INSERT-- 的时候,通过鼠标上下键进行文件修改,具体配置如下图:

7、当完成Nginx配置文件的修改后,按键盘ESC键退出编辑模式,然后输入 :wq 并回车,保存修改并退出。 修改完nginx配置文件后,

8、需要输入 nginx -s reload 重启nginx配置。这里如果重启失败,可输入 nginx -c /etc/nginx/nginx.conf ,然后再次重启。

四、阿里云后台配置防火墙

1、在阿里云服务器安全/防火墙配置中添加在nginx.conf中配置的端口号 如图所示:

2、保存成功后,即此时,再通过阿里云的公网ip访问,就可以看到我们的项目啦,啦啦啦啦~

欢迎访问我的组件库! http://47.100.68.20:8080/

如有写的不对的地方,欢迎指导。