nginx+Xshell+Xftp将静态项目部署到腾讯云服务器

超级侦探
229 阅读3分钟

1.先购买腾讯云服务器

image.png

进入腾讯云官网搜索轻量应用服务器

image.png

点击立即选购就会出现选购服务器的方案,我们这里是个人应用所以服务器不需要购买太贵的,刚好够我们自己使用就行

 购买服务器成功后我们会登录进取服务器控制台

image.png

点击进入控制台

image.png

我们会进入到控制台界面,这时我们需要登录我们购买的服务器

image.png

点击登录一般在第一次登录时会按照,系统设置的账号和密码来登录服务器,但是建议还是自己重置密码,防止自己服务器像公交车,谁都能上!!!  还有怎么知道系统设置的密码和账号,可以在界面中的站内信中查看

image.png

重置密码:

image.png

个人建议都需要重置密码,因为在后面链接xshell和xftp时没有重置密码会需要你使用ssh来进行链接,需要重置密码才能进行密码链接

2.当设置好自己的服务器之后可以去下载Xshell和Xftp了

家庭/学校免费 - NetSarang Website

这里推荐免费版的,可以满足我们所须的功能

image.png

点击下载

image.png

再点击免费授权页面

image.png

将你的名字和你的邮箱填上去,你的邮箱会收到下载的链接,然后点击链接进行下载,下载完成后桌面上就会出现Xshellh和xftp的图标

image.png

先将Xshell和自己的服务器进行链接

1.点击新建

image.png

2.将xshell与服务器进行链接 ,点击链接

image.png

可能有家人们不知道ip地址在哪里

image.png

3.点击连接后会出现登录账户的弹窗

image.png

用户名默认为root,点击确认

4.如果是第一次连接会让弹出验证框,一个是password验证,一个是ssh验证,因为我们前面已经重置了服务器的面,所以我们选择密码验证,在输入框中输入你重置后的密码即可

5.连接xftp

image.png

6.点击新建

image.png

名称就填你要上传的项目名称,主机就是服务器的ip地址 7.填写账户 (默认还是root)

image.png

8.填写账户后会跳转到验证窗口

image.png

点击输入重置后的服务器密码即可

9.创建文件目录

image.png

10.将vue项目打包好的dist文件拖入文件加下

image.png

3.配置Nginx

1.切换到xshell

image.png

一键安装这四个依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

image.png

  1. 连上nginx服务器以后我们一般再/root目录下，但我们的nginx需要发布到/usr/local文件夹下
  2. 因为/root目录和/usr是同级目录 cd ../usr/local
  3. mkdir nginx 创建一个文件夹
  4. cd nginx
  5. //下载tar包
  6. wget nginx.org/download/ng…
  7. tar -xvf nginx-1.13.7.tar.gz
//进入nginx目录
cd /usr/local/nginx
//进入目录
cd nginx-1.13.7
//执行命令 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
//执行make命令
make
//执行make install命令
make install
  1. cd ../ 退到nginx目录下
  2. cd sbin 进入sbin
  3. ./nginx
  4. npm run build 打包我们的项目
  5. 通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下，覆盖原文件即可，刷新页面即可。

image.png

此时就能通过公网ip访问自己的项目了

avatar
文章
阅读
粉丝