【阿里云新手使用】Vue前端项目上传至阿里云服务器,并通过公网IP访问前端网站 | 您所在的位置:网站首页 › 网站上传服务器后不显示怎么办 › 【阿里云新手使用】Vue前端项目上传至阿里云服务器,并通过公网IP访问前端网站 |
Vue前端项目上传至阿里云服务器,并通过公网IP访问前端网站
一、打包Vue代码为静态文件
1.1 打包发布
vue脚手架只是开发过程中协助开发的工具,真正上线时,需要将vue项目转换成静态资源文件 命令; yarn build npm run build//使用npm命令也可,二选一运行成功界面: 将项目根目录下的vue.config.js文件下的publicPath添加修改即可。 创建时其他选项可自行设置,登录云服务器的凭证博主选择的自定义密码 点击实例中的云服务器(上图表项中的蓝色部分),之后点击安全组,如下 使用实例表项中的远程连接,第一次连接选择vnc远程连接,连接时需要输入开机用户和密码,在上面的设置里已经设置了用户是root 密码是自己设置的,如果忘记了,可以重制密码,在实例表项右侧的操作里可修改 这种方法不方便传输文件,但仅是配置vue项目前端也够用了 方法二:使用finalshell远程连接(之后的命令行内容都是使用finalshell工具)下载finalshell 或者 xshell+xftp(下列的1,2选则其一即可,博主使用finalshell) 1)finalshell既可以远程控制,也可以传输文件 2)xshell负责远程控制,xftp远程传输文件 finalshell连接云服务器方法: nginx是轻量级的web服务器,用于托管网站和应用程序。 3.1 安装nginx所需依赖 yum install pcre yum install pcre-devel yum install zlib yum install zlib-devel 3.2 下载并解压nginx建议不要下载太早的版本,博主一开始使用1.6.2版本,在后面安装的时候会出现报错,改用了1.8.2版本才ok wget http://nginx.org/download/nginx-1.6.2.tar.gz//下载 cd /usr/local //解压到local目录 tar -zxvf nginx-1.8.2.tar.gz -C /usr/local解压完成后再local目录出现nginx-1.8.2文件夹 3.3 进行configure配置configure文件在/usr/local/nginx-1.8.2下,配置期望在local下生成nginx文件 cd /usr/local/nginx-1.8.2 ./configure --prefix=/usr/local/nginx //./configure意思是运行该目录下的configure文件 3.4 编译安装nginx cd /usr/local/nginx-1.8.2//在这个目录下编译 make && make install配置编译安装完成后在local文件夹下生成nginx文件夹,nginx安装完成 3.5 启动nginx cd /usr/local/nginx/sbin //启动文件在sbin文件夹下 ./nginx //启动nginx查看nginx是否启动成功:下面的命令用于列出当前系统上运行的所有进程,然后筛选出只包含 “nginx” ps:显示所有进程 -ef显示完整信息 ps -ef | grep nginx启动成功可以看到下面的界面,第一行表示root用户开启的nginx进程 1)云服务器的防火墙 systemctl status firewalld//查看防火墙状态,期望是inactivate状态 systemctl stop firewalld//关闭防火墙使其inactivate
至此,web服务器(nginx)启动成功 四、启动vue前端界面经过前面的步骤,浏览器访问公网ip出现的是welcome to nginx界面,并没有我们想要的网站界面,还需要在/usr/local/nginx/conf/nginx.conf文件做配置 cd /usr/local/nginx/conf/ vim nginx.conf//编辑nginx.confw文件需要修改http下的server,需要修改以下: 1)listen 80,监听端口80开启,这是http的默认端口 2)server_name localhost 3)loaction /{ root /home/intent_drive/dist (root这里写dist目录) index index.html index.htm(这里写dist下的静态html文件) } 配置好后如下图 重启nginx后可以再重新执行ps -ef | grep nginx确保进程开启 netstat -ano | grep 80 可查看80端口被占用情况,如果80端口有其他进程占用,可以kill PID(进程pid)杀死进程,但这个步骤可能将打开的nginx进程误杀,可以kill之后再重新开启进程。 四、END在浏览器输入公网ip就可以看到前端界面了,如下。 总结:不要过度依赖教程。。。。 【1】https://www.bilibili.com/video/BV1HV4y1a7n4?p=139&vd_source=71ddc605b372925416e18a894458e729 【2】https://blog.csdn.net/weixin_45572139/article/details/106085232 |
CopyRight 2018-2019 实验室设备网 版权所有 |