使用阿里云服务器部署前端项目

简介: 使用阿里云服务器部署前端项目,完成后可通过服务器域名访问网页

安装npm

  1. 下载源码安装包

cd ~

wget https://nodejs.org/dist/v12.2.0/node-v12.2.0-linux-x64.tar.xz


  1. 解压并放入指定目录

tar -xf node-v12.2.0-linux-x64.tar.xz

mv node-v12.2.0-linux-x64 /usr/local/node


  1. 建立软连接

cd /usr/bin

ln -s /usr/local/node/bin/node node

ln -s /usr/local/node/bin/npm npm


  1. 切换淘宝镜像

npm config set registry https://registry.npm.taobao.org

验证 npm config get registry


通过cnpm使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd /usr/bin

ln -s /usr/local/node/bin/cnpm cnpm


安装Nginx

下载相关组件

wget http://nginx.org/download/nginx-1.10.2.tar.gz

wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz

wget http://zlib.net/zlib-1.2.12.tar.gz

wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gz


安装 c++ 编译环境:apt-get install gcc-c++


安装openssl:

tar zxvf openssl-fips-2.0.10.tar.gz

cd openssl-fips-2.0.10

./config && make && make install

pcre安装

tar jxvf pcre-8.45.tar.bz2

cd pcre-8.45

./configure && make && make install


zlib安装

tar zxvf zlib-1.2.12.tar.gz

cd zlib-1.2.12

./configure && make && make install


nginx安装

tar zxvf nginx-1.10.2.tar.gz

cd nginx-1.10.2

./configure && make && make install


启动nginx:

输入 whereis nginx,显示 nginx: /usr/local/nginx


进入目录并启动

cd /usr/local/nginx

/usr/local/nginx/sbin/nginx


软连接 ln -s /usr/local/nginx/sbin/nginx nginx


进入Linux系统的图形界面,打开浏览器输入localhost会看到Welcome to nginx,说明 nginx 启动成功


附:nginx基本操作:

启动

/usr/local/nginx/sbin/nginx

停止/重启

/usr/local/nginx/sbin/nginx -s stop(quit、reload)

命令帮助

/usr/local/nginx/sbin/nginx -h

验证配置文件

/usr/local/nginx/sbin/nginx -t

配置文件

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


项目上线


新建 vue.config.js 文件,作为打包时 webpack 使用的一个配置项

module.exports = defineConfig({

 publicPath: '将要放入服务器的路径'

})

npm run build  打包生成线上能执行的代码,执行后会生成 dist 目录,存放打包的文件。dist目录里就是需要打包上线的代码。

/usr/local/nginx/conf/nginx.conf 修改配置


相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
6天前
|
弹性计算 监控 负载均衡
|
25天前
|
监控 安全 Linux
RHEL 环境下 Subversion 服务器部署与配置
【10月更文挑战第18天】在RHEL环境下部署Subversion服务器需依次完成安装Subversion、创建版本库、配置服务器、启动服务、客户端连接及备份维护等步骤。确保遵循安全最佳实践,保障数据安全。
|
16天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
5天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
18 2
|
7天前
|
PHP 数据库 数据安全/隐私保护
布谷直播源码部署服务器关于数据库配置的详细说明
布谷直播系统源码搭建部署时数据库配置明细!
|
15天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
16天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
152 2
|
16天前
|
NoSQL Linux PHP
|
17天前
|
弹性计算 数据库连接 Nacos
阿里云ECS服务器在docker中部署nacos
docker pull nacos 失败,docker部署nacos遇到的问题,nacos数据库连接,nacos端口映射
76 1
|
22天前
|
监控 网络安全 调度
Quartz.Net整合NetCore3.1,部署到IIS服务器上后台定时Job不被调度的解决方案
解决Quartz.NET在.NET Core 3.1应用中部署到IIS服务器上不被调度的问题,通常需要综合考虑应用配置、IIS设置、日志分析等多个方面。采用上述策略,结合细致的测试和监控,可以有效地提高定时任务的稳定性和可靠性。在实施任何更改后,务必进行充分的测试,以验证问题是否得到解决,并监控生产环境的表现,确保长期稳定性。
35 1

热门文章

最新文章