前端项目(React/Vue）第一次部署到服务器上

秃头蛙蛙
354 阅读2分钟

【前言】

最近有时间想着自己把自己项目上传到阿里云服务器中，这样可以外网访问，虽说过程有点坎坷，想着记录下来留点经验，话不多说，直接进去正题。

准备阶段：云服务器，FileZilla(ftp),MobaXterm

🦃第一步：连接服务器

如果是第一次买云服务器，先点击远程连接，设置 登录的密码 公网ip.png 接着获取公网ip 打开MobaXterm 软件连接云服务器

m.png

添加用户.png 连接完成之后会出现 （阿里云为例）Welcome to Alibaba Cloud Elastic Compute Service !就成功连接云服务器了

🐔第二步安装nginx

nginx8.png

  • 鼠标右键，复制链接地址

  • MobaXterm 进入安装为位置

cd /usr/local

cd local.png

  • 新建nginx 文件夹
mkdir nginx

mkdir nginx.png

  • 进入nginx的文件夹中
cd nginx
  • 下载 nginx
wget http://nginx.org/download/nginx-1.24.0.tar.gz

wget nginx.png

  • 解压并进入nginx目录
tar -zxvf nginx-1.24.0.tar.gz
cd nginx-1.24.0
  • 编译安装
make
make install
  • 进入sbin 看到可执行文件nginx ，直接执行就可以了
./nginx

进入sbin 执行.png

  • 查看是否启动nginx 成功，出现ok 和successful 就是成功了

查看是否成功nginx.png

  • 记得配置云服务器80端口

80端口.png

  • 输入公网ip 看到Welcome to nginx! nginx 就搭建成功啦

welcome.png

🐓第三步 配置nginx

  • 进入nginx/conf 文件夹,修改nginx.conf 文件
 cd /usr/local/nginx/conf
 vi nginx.conf
  • 设置你的React部署的目录

react 文件目录.png

🐣第四步 打包React/Vue 项目

tip：记得在package.jso中添加"homepage": "./",

"homepage": "./",

打包项目，在build文件夹中可以看到项目情况

yarn build

🐤第五步，用ftp 上传到你设置nginx.conf 的文件夹中就可以成功看到你的项目了

nginx.conf设置的目录.png

  • 上传值后就可以看到你的页面啦 succes.png 把项目上传到服务器不难，主要还是nginx 的搭建和一些需要注意的细节（需要在云服务器配置80端口，打包需要加上homepage），linux 的一些指令百度基本都有。

有服务器的可以尝试起来，还是相对比较简单的，虽说过程因为不太熟悉导致有点慢，页面出来之后的满足感还是很不错的，也算是一次不错的尝试！！

avatar
文章
阅读
粉丝