手动部署前端项目到云服务器

1、购买云服务器

推荐阿里云或者腾讯云，或者其他云服务平台，购买服务器，一般自带公网IP。

• 阿里云官网：www.aliyun.com/
• 腾讯云官网：cloud.tencent.com/

地域：选择靠近自己的地域

镜像：服务器的操作系统，推荐使用Ubuntu或者CentOS

域名：购买，绑定公网IP

2、连接云服务器(SSH)

• windows：Xshell（用于主机连接到云服务器）、Xftp（用于主机传输文件到云服务器）

  • 下载：www.xshell.com/zh/xshell-d…
  • 使用教程：blog.csdn.net/weixin_5775…

• Mac：Royal TSX（推荐）

  • 下载：www.royalapps.com/ts/mac/feat…
  • 使用教程：juejin.cn/post/719707…

3、配置Nginx环境

连接成功后，看此时的操作是否是root用户，如果不是root用户，输入su切换为root用户

输入ls，查看文件夹，没有反应的话，输入cd /，再输入ls，就可以查看所有根目录的文件夹了

1. 下载Nginx

   输入指令下载

   yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel
   

   解压

   cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz
   

2. 安装Nginx

   进入软件目录中

   cd nginx-1.21.6
   

   输入指令

   ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-pcre  --with-http_ssl_module
   

   再输入指令

   make && make install
   

   启动

   /usr/local/nginx/sbin/nginx
   

3. 配置Nginx

   打开配置文件

   vim /usr/local/nginx/conf/nginx.conf
   

   输入字母i进入编辑模式，找到server配置项 最后先摁esc键，再输入**:wq**，回车保存。

4. 启动Nginx

   /usr/local/nginx/sbin/nginx
   

   或者创建软链接

   ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
   

   然后启动

   nginx
   

4、传输文件

1. 创建SFTP

2. 替换掉对应文件夹中的dist目录，比如说我们这里是/myapp/dist

3. 重启Nginx

   关闭nginx服务

   nginx -s stop
   

   重启

   nginx
   

5、访问公网IP

访问设定好的公网IP+端口号，即可访问部署好的前端页面