ECS使用体验——纯前端部署

第一部分

大三就读软件工程专业，通过b站视频了解到阿里云服务器，并且又客服介绍了解到“飞天加速计划·高校学生在家实践”的活动

第二部分

第二部分：使用Vue3尝试部署服务器

！！！需要先控制台-实例，管理器页面重置密码！！！

前端使用的是Vue3 阿里云服务器选择是Ubuntu 20.04 64位

1. Vue3打包前端网址在dist，需要修改vue.config.js以及router/index.js否则会出现白屏。打包结束后可以在dist/index.html中检查是否打包成功。打包成功的dist文件中应该包括静态资源和index页面。

   // vue.config.js 的更改如下
   
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     publicPath: "./",
     assetsDir: "static",
     outputDir: 'dist',
   })

   // router/index.js 的修改如下
   
   const router = createRouter({
     history: createWebHashHistory(), // 没有后端的情况下才可以使用，有后端的话后端无法生效
     base: process.env.BASE_URL,
     routes
   })

2. 下载 Xftp

   1. 上传dist：

      创建新会话，主机(H)栏填写实例中的公用ip和输入账号密码，然后将vue3打包好的dist传输到远程服务器上。

      

   2. Ubuntu 安装 nginx

      1. 安装gcc：apt-get install gcc automake autoconf libtool make
      2. 在Nginx官网安装压缩包.tar.gz，然后通过Xftp把压缩包上传到远程服务器上，然后在Xshell解压缩

3. 下载 Xshell

   1. 首先在Xshell建立与远程服务器的新链接，主机(H)栏填写实例中的公用ip。点击链接后选择输入账号和密码，账号密码就是填写在实例设置的账号密码（root和重新设置的），再点击确定后就可以成功连接到阿里云服务器

      

   2. Ubuntu 安装 nginx

      1. 安装gcc：apt-get install gcc automake autoconf libtool make
      2. 在Nginx官网安装压缩包.tar.gz，然后通过Xftp把压缩包上传到远程服务器上，然后在Xshell解压缩：tar -zxvf nginx-1.22.0.tar.gz

         

         

      3. 安装相关包

         apt-get install libpcre3 libpcre3-dev
         apt-get install zlib1g zlib1g-dev
         apt-get install openssl openssl-dev
         apt-get install libssl-dev

      4. 安装Nginx

         cd nginx-1.22.0
         ./configure
         make
         make installv

      5. 运行Nginx

         cd /usr/local/nginx/sbin
         vim /usr/local/nginx/conf/nginx.conf // 修改conf
         /usr/local/nginx/sbin/nginx -s reload 
         // 修改配置文件后再重新载入配置文件

         
         继续运行./nignx，如果直接运行成功就可以在ip上查看是不是配置成功。如果出现 nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，那就意味着服务器被占用了，这时候需要Kill了本来的服务器上运行的进程，使用fuser -k 80/tcp
         

第三部分

收获总结：首先在部署的过程中遇到困难应该主动在网络搜索不同的解决方法，而不是在只是搜索单一的保姆教学，同时也需要根据自己的操作系统，比如Centos安装新的包使用的yum，而Ubuntu使用的apt-get install，因此如果直接按照网络上的攻略在Ubuntu系统中yum中会出现没有yum，再尝试apt-get install yum会显示无法locate，但实际上在Ubuntu中直接使用yum就可以，网络上的教程并不一定适用于Ubuntu。

同时也进一步了解了Linux系统的操作。

第四部分